Webleb - UI Elements - 3d silder effect

HTML

<!DOCTYPE html>

<head>

<title>3D Slider Effect</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Arial', sans-serif;

background: #111;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

overflow: hidden;

perspective: 1000px;

}

.slider-container {

position: relative;

width: 100%;

max-width: 800px;

height: 500px;

transform-style: preserve-3d;

}

.slider-title {

position: absolute;

top: -80px;

left: 50%;

transform: translateX(-50%);

color: white;

font-size: 2rem;

text-align: center;

width: 100%;

z-index: 10;

}

.slider {

position: absolute;

width: 100%;

height: 100%;

transform-style: preserve-3d;

transition: transform 1s ease;

}

.slide {

position: absolute;

width: 300px;

height: 400px;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

background: white;

border-radius: 10px;

overflow: hidden;

box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);

transition: transform 1s ease;

}

.slide img {

width: 100%;

height: 100%;

object-fit: cover;

}

.slide-content {

position: absolute;

bottom: 0;

left: 0;

right: 0;

padding: 20px;

background: rgba(0, 0, 0, 0.7);

color: white;

transform: translateY(100%);

transition: transform 0.3s ease;

}

.slide:hover .slide-content {

transform: translateY(0);

}

.slide h3 {

margin-bottom: 10px;

font-size: 1.5rem;

}

.slide p {

font-size: 0.9rem;

}

.navigation {

position: absolute;

bottom: -60px;

left: 50%;

transform: translateX(-50%);

display: flex;

gap: 20px;

z-index: 10;

}

.nav-btn {

width: 50px;

height: 50px;

border-radius: 50%;

background: rgba(255, 255, 255, 0.2);

border: 2px solid white;

color: white;

font-size: 1.2rem;

cursor: pointer;

transition: all 0.3s ease;

display: flex;

justify-content: center;

align-items: center;

}

.nav-btn:hover {

background: white;

color: #111;

}

@media (max-width: 768px) {

.slider-container {

height: 400px;

}

.slide {

width: 250px;

height: 350px;

}

</style>

</head>

<body>

<h2 class="slider-title">3D Image Slider</h2>

</div>

</div>

document.addEventListener('DOMContentLoaded', function() {

const slider = document.getElementById('slider');

const prevBtn = document.getElementById('prevBtn');

const nextBtn = document.getElementById('nextBtn');

// Sample data for slides

const slidesData = [

{

image: 'https://source.unsplash.com/random/800x600?nature',

title: 'Nature Beauty',

description: 'Explore the wonders of natural landscapes'

},

{

image: 'https://source.unsplash.com/random/800x600?city',

title: 'Urban Life',

description: 'Discover vibrant cityscapes'

},

{

image: 'https://source.unsplash.com/random/800x600?technology',

title: 'Modern Tech',

description: 'The latest in technological advancements'

},

{

image: 'https://source.unsplash.com/random/800x600?animal',

title: 'Wildlife',

description: 'Meet creatures from around the world'

},

{

image: 'https://source.unsplash.com/random/800x600?food',

title: 'Culinary Arts',

description: 'Delicious dishes from global cuisines'

}

];

// Create slides

slidesData.forEach((slide, index) => {

const slideElement = document.createElement('div');

slideElement.className = 'slide';

slideElement.innerHTML = `

<h3>${slide.title}</h3>

<p>${slide.description}</p>

</div>

`;

slider.appendChild(slideElement);

});

const slides = document.querySelectorAll('.slide');

let currentSlide = 0;

const totalSlides = slides.length;

// Initialize slider

function initSlider() {

// Position slides in 3D space

slides.forEach((slide, index) => {

const angle = (index / totalSlides) * Math.PI * 2;

const radius = 500; // Distance from center

const x = Math.sin(angle) * radius;

const z = Math.cos(angle) * radius - radius;

slide.style.transform = `translate(-50%, -50%) translate3d(${x}px, 0, ${z}px) rotateY(${angle}rad)`;

slide.style.opacity = z < -300 ? '0' : '1';

});

}

// Rotate slider

function rotateSlider(direction) {

if (direction === 'next') {

currentSlide = (currentSlide + 1) % totalSlides;

} else {

currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;

}

const angle = (currentSlide / totalSlides) * -Math.PI * 2;

slider.style.transform = `rotateY(${angle}rad)`;

// Update slide positions for continuous rotation

slides.forEach((slide, index) => {

const slideAngle = (index / totalSlides) * Math.PI * 2 + angle;

const radius = 500;

const x = Math.sin(slideAngle) * radius;

const z = Math.cos(slideAngle) * radius - radius;

slide.style.transform = `translate(-50%, -50%) translate3d(${x}px, 0, ${z}px) rotateY(${slideAngle}rad)`;

slide.style.opacity = z < -300 ? '0' : '1';

slide.style.zIndex = Math.round(z);

});

}

// Event listeners

nextBtn.addEventListener('click', () => rotateSlider('next'));

prevBtn.addEventListener('click', () => rotateSlider('prev'));

// Keyboard navigation

document.addEventListener('keydown', (e) => {

if (e.key === 'ArrowRight') rotateSlider('next');

if (e.key === 'ArrowLeft') rotateSlider('prev');

});

// Initialize

initSlider();

// Auto-rotate (optional)

let autoRotate = setInterval(() => rotateSlider('next'), 3000);

// Pause auto-rotate on hover

slider.addEventListener('mouseenter', () => clearInterval(autoRotate));

slider.addEventListener('mouseleave', () => {

autoRotate = setInterval(() => rotateSlider('next'), 3000);

});

</script>

</body>

</html>

CSS

JS

3d silder effect

Recommended