Slide Show Using HTML, CSS and Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Next Gen Carousel</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="carousel-wrapper">
<div class="carousel">
<!-- Cards -->
<article class="card">
<img
src="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=800&q=80"
alt="Technology"
/>
<div class="card-content">
<span>TECHNOLOGY</span>
<h2>Future of Technology</h2>
<p>
Explore the technologies shaping the next generation of digital experiences.
</p>
</div>
</article>
<article class="card">
<img
src="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=800&q=80"
alt="Technology"
/>
<div class="card-content">
<span>TECHNOLOGY</span>
<h2>Future of Technology</h2>
<p>
Explore the technologies shaping the next generation of digital experiences.
</p>
</div>
</article>
<article class="card">
<img
src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=800&q=80"
alt="Programming"
/>
<div class="card-content">
<span>PROGRAMMING</span>
<h2>Master Modern Coding</h2>
<p>
Build powerful applications using modern programming technologies.
</p>
</div>
</article>
<article class="card">
<img
src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?auto=format&fit=crop&w=800&q=80"
alt="Artificial Intelligence"
/>
<div class="card-content">
<span>AI</span>
<h2>Artificial Intelligence</h2>
<p>
Discover how AI is transforming software, business and everyday life.
</p>
</div>
</article>
<article class="card">
<img
src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=800&q=80"
alt="Cloud Computing"
/>
<div class="card-content">
<span>CLOUD</span>
<h2>Cloud Computing</h2>
<p>
Learn how modern applications are designed and deployed in the cloud.
</p>
</div>
</article>
<article class="card">
<img
src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=800&q=80"
alt="Data"
/>
<div class="card-content">
<span>DATA</span>
<h2>Data & Analytics</h2>
<p>
Turn massive amounts of data into meaningful insights and decisions.
</p>
</div>
</article>
<!-- Navigation -->
<button class="nav prev" aria-label="Previous slide">❮</button>
<button class="nav next" aria-label="Next slide">❯</button>
<!-- Dots -->
<div class="dots"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
background:
radial-gradient(circle at 20% 20%, #243b55 0%, transparent 35%),
radial-gradient(circle at 80% 80%, #16213e 0%, transparent 35%),
#050816;
overflow: hidden;
}
.carousel-wrapper {
width: min(1100px, 95%);
position: relative;
}
.carousel {
position: relative;
height: 520px;
display: flex;
justify-content: center;
align-items: center;
perspective: 1200px;
overflow: hidden;
}
/* Cards */
.card {
position: absolute;
width: 330px;
height: 430px;
border-radius: 28px;
overflow: hidden;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.45),
inset 0 1px rgba(255, 255, 255, 0.15);
transition:
transform 0.7s cubic-bezier(.2, .8, .2, 1),
opacity 0.7s ease,
filter 0.7s ease;
cursor: pointer;
user-select: none;
}
.card img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(to top,
rgba(0, 0, 0, 0.85),
rgba(0, 0, 0, 0.05) 65%);
}
/* Card Content */
.card-content {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
right: 0;
padding: 30px;
color: white;
}
.card-content span {
display: inline-block;
padding: 6px 12px;
margin-bottom: 12px;
border-radius: 50px;
font-size: 12px;
font-weight: bold;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.card-content h2 {
font-size: 28px;
margin-bottom: 8px;
}
.card-content p {
font-size: 14px;
line-height: 1.5;
opacity: 0.8;
}
/* Active */
.card.active {
box-shadow:
0 40px 100px rgba(0, 0, 0, 0.6),
0 0 50px rgba(100, 150, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
}
/* Navigation */
.nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(15px);
color: white;
font-size: 22px;
cursor: pointer;
z-index: 20;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s ease;
}
.nav:hover {
background: rgba(255, 255, 255, 0.18);
transform: translateY(-50%) scale(1.1);
}
.prev {
left: 15px;
}
.next {
right: 15px;
}
/* Dots */
.dots {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 30;
}
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: 0.3s ease;
}
.dot.active {
width: 28px;
border-radius: 20px;
background: white;
}
/* Mobile */
@media (max-width: 700px) {
.carousel {
height: 500px;
}
.card {
width: 270px;
height: 390px;
}
.nav {
width: 45px;
height: 45px;
}
.prev {
left: 5px;
}
.next {
right: 5px;
}
.card-content {
padding: 22px;
}
.card-content h2 {
font-size: 23px;
}
}const cards = document.querySelectorAll(".card");
const dotsContainer = document.querySelector(".dots");
const nextButton = document.querySelector(".next");
const prevButton = document.querySelector(".prev");
let currentIndex = 0;
/*
Create dots
*/
cards.forEach((_, index) => {
const dot = document.createElement("button");
dot.classList.add("dot");
dot.addEventListener("click", () => {
currentIndex = index;
updateCarousel();
});
dotsContainer.appendChild(dot);
});
const dots = document.querySelectorAll(".dot");
/*
Update carousel
*/
function updateCarousel() {
const total = cards.length;
cards.forEach((card, index) => {
let offset = index - currentIndex;
/*
Handle circular positioning
*/
if (offset > total / 2) {
offset -= total;
}
if (offset < -total / 2) {
offset += total;
}
/*
Center card
*/
if (offset === 0) {
card.style.transform = "translateX(0) translateZ(100px) scale(1)";
card.style.opacity = "1";
card.style.filter = "none";
card.style.zIndex = "10";
card.classList.add("active");
}
/*
Right cards
*/
else if (offset > 0) {
card.style.transform = `translateX(${offset * 240}px) translateZ(${-Math.abs(offset) * 80}px) rotateY(-25deg) scale(${1 - Math.abs(offset) * 0.12})`;
card.style.opacity = Math.abs(offset) > 2 ? "0" : "0.65";
card.style.filter = "blur(1px)";
card.style.zIndex = `${5 - offset}`;
card.classList.remove("active");
}
/*
Left cards
*/
else {
card.style.transform = `translateX(${offset * 240}px) translateZ(${-Math.abs(offset) * 80}px) rotateY(25deg) scale(${1 - Math.abs(offset) * 0.12})`;
card.style.opacity = Math.abs(offset) > 2 ? "0" : "0.65";
card.style.filter = "blur(1px)";
card.style.zIndex = `${5 - Math.abs(offset)}`;
card.classList.remove("active");
}
});
/*
Update dots
*/
dots.forEach((dot, index) => {
dot.classList.toggle("active", index === currentIndex);
});
}
/*
Next
*/
nextButton.addEventListener("click", () => {
currentIndex = (currentIndex + 1) % cards.length;
// Moving Next: 0 -> 1 -> 2 -> 3 -> 4 -> 0
updateCarousel();
});
/*
Previous
*/
prevButton.addEventListener("click", () => {
currentIndex = (currentIndex - 1 + cards.length) % cards.length;
// Moving Prev: 0 -> 4 -> 3 -> 2 -> 1 -> 0
updateCarousel();
});
/*
Keyboard controls
*/
document.addEventListener("keydown", (event) => {
if (event.key === "ArrowRight") {
nextButton.click();
}
if (event.key === "ArrowLeft") {
prevButton.click();
}
});
/*
Touch / Swipe support
*/
let touchStartX = 0;
let touchEndX = 0;
document.querySelector(".carousel").addEventListener("touchstart", (event) => {
touchStartX = event.changedTouches[0].screenX;
});
document.querySelector(".carousel").addEventListener("touchend", (event) => {
touchEndX = event.changedTouches[0].screenX;
handleSwipe();
});
function handleSwipe() {
const difference = touchStartX - touchEndX;
if (Math.abs(difference) < 50) {
return;
}
if (difference > 0) {
nextButton.click();
} else {
prevButton.click();
}
}
/*
Autoplay
*/
let autoplay = setInterval(() => {
currentIndex = (currentIndex + 1) % cards.length;
updateCarousel();
}, 4500);
/*
Pause autoplay while hovering
*/
const carousel = document.querySelector(".carousel");
carousel.addEventListener("mouseenter", () => clearInterval(autoplay));
carousel.addEventListener("mouseleave", () => {
autoplay = setInterval(() => {
currentIndex = (currentIndex + 1) % cards.length;
updateCarousel();
}, 4500);
});
/*
Initialize
*/
updateCarousel();
Understanding the Next-Generation 3D Carousel The uploaded code creates a modern, responsive, interactive 3D image carousel using only HTML, CSS, and JavaScript. The carousel contains multiple cards, places the cur...
Read Full Documentation →