-
Card Carousel
HTML
CSS
JavaScript
<div class="carousel-container"> <div class="carousel"> <div class="carousel-track" id="track"> <div class="card">SLIDE 1</div> <div class="card">SLIDE 2</div> <div class="card">SLIDE 3</div> <div class="card">SLIDE 4</div> <div class="card">SLIDE 5</div> </div> </div> <div class="dots" id="dots"></div> </div>
body{ margin:0; background:#f2f2f2; font-family: Arial, sans-serif; display:flex; justify-content:center; align-items:center; height:100vh; } .carousel-container{ width:900px; position:relative; } .carousel{ overflow:hidden; } .carousel-track{ display:flex; gap:20px; transition: transform 0.5s ease; } .card{ min-width:280px; height:180px; background:#0d4b78; color:white; border-radius:20px; display:flex; justify-content:center; align-items:center; font-size:28px; font-weight:bold; flex-shrink:0; box-shadow:0 8px 20px rgba(0,0,0,0.15); } /* Dots */ .dots{ display:flex; justify-content:center; margin-top:20px; gap:10px; } .dot{ width:10px; height:10px; background:#ffb3a7; border-radius:50%; cursor:pointer; transition:0.3s; } .dot.active{ background:#ff3d2e; transform:scale(1.3); }
const track = document.getElementById("track"); const dotsContainer = document.getElementById("dots"); const cards = document.querySelectorAll(".card"); let index = 0; const visibleCards = 3; const totalSlides = cards.length - visibleCards + 1; // Create dots for(let i=0; i<totalSlides; i++){ const dot = document.createElement("div"); dot.classList.add("dot"); if(i===0) dot.classList.add("active"); dot.addEventListener("click", () => moveToSlide(i)); dotsContainer.appendChild(dot); } function moveToSlide(i){ index = i; track.style.transform = `translateX(-${i * 300}px)`; updateDots(); } function updateDots(){ document.querySelectorAll(".dot").forEach((dot, i)=>{ dot.classList.toggle("active", i === index); }); } // Optional Auto Slide setInterval(()=>{ index++; if(index >= totalSlides) index = 0; moveToSlide(index); },3000);
Live Preview
- Card Carousel