Tạo Slider/Carousel với CSS Flexbox (lặp vô hạn)

Carousel vô hạn: dùng JS để clone items, CSS cho transition mượt. 2 cách: JS slide hoặc CSS animation.

Cách 1: JS Control (slide từng cái)

<!DOCTYPE html>
<html>
<head>
  <style>
    .container { max-width: 600px; position: relative; margin: 6% auto; overflow: hidden; }
    .slide { display: none; }
    .slide.active { display: block; }
    .slide img { width: 100%; height: auto; border-radius: 8px; }
    .prevbtn, .nextbtn {
      position: absolute; top: 50%; transform: translateY(-50%);
      padding: 12px 16px; color: white; font-weight: bold;
      cursor: pointer; background: rgba(0,0,0,0.5); border-radius: 50%;
      transition: background 0.2s; z-index: 10;
    }
    .prevbtn:hover, .nextbtn:hover { background: rgba(0,0,0,0.8); }
    .prevbtn { left: 10px; } .nextbtn { right: 10px; }
  </style>
</head>
<body>
  <div class="container">
    <div class="slide active"><img src="img1.jpg"></div>
    <div class="slide"><img src="img2.jpg"></div>
    <div class="slide"><img src="img3.jpg"></div>
    <div class="slide"><img src="img4.jpg"></div>
    <div class="slide"><img src="img5.jpg"></div>
    <a class="prevbtn" onclick="changeSlide(-1)">❮</a>
    <a class="nextbtn" onclick="changeSlide(1)">❯</a>
  </div>
  <script>
    let slideIndex = 0;
    const slides = document.querySelectorAll(".slide");
    function showSlide(n) {
      slides.forEach(s => s.classList.remove("active"));
      slideIndex = (n + slides.length) % slides.length;
      slides[slideIndex].classList.add("active");
    }
    function changeSlide(n) { showSlide(slideIndex + n); }
    // Auto slide
    setInterval(() => changeSlide(1), 5000);
  </script>
</body>
</html>

Cách 2: CSS Animation (infinite loop)

<style>
  .carousel {
    display: flex;
    width: 200%; /* 2 lần số item để loop mượt */
    animation: scroll 20s linear infinite;
  }
  .carousel:hover { animation-play-state: paused; }
  .slide { flex: 0 0 20%; min-width: 20%; }
  .slide img { width: 100%; }
  @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Chuyển nửa đầu tiên */
  }
</style>
<div class="carousel">
  <div class="slide"><img src="1.jpg"></div>
  <div class="slide"><img src="2.jpg"></div>
  <div class="slide"><img src="3.jpg"></div>
  <div class="slide"><img src="4.jpg"></div>
  <div class="slide"><img src="5.jpg"></div>
  <!-- Clone 5 item đầu để loop liền mạch -->
  <div class="slide"><img src="1.jpg"></div>
  <div class="slide"><img src="2.jpg"></div>
  <div class="slide"><img src="3.jpg"></div>
  <div class="slide"><img src="4.jpg"></div>
  <div class="slide"><img src="5.jpg"></div>
</div>

So sánh

• JS: Có điều khiển prev/next, pause, dots, keyboard nav
• CSS only: Nhẹ, mượt, nhưng không có controls, khó pause chính xác