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>

3d silder effect

Recommended

Bootstrap Navbar Template

Toggle Sidebar Navigation

Animated Download Button

HTML

CSS

JS

Recommended

Bootstrap Navbar Template

Toggle Sidebar Navigation

Animated Download Button

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS