Bootstrap 5 Slideshow

Carousel / Slideshows

Carousel (幻灯片) là một trình duyệt vòng lặp để duyệt qua các yếu tố:

Cách tạo Carousel

Dưới đây là ví dụ về cách tạo carousel cơ bản với chỉ dẫn và điều khiển:

Mô hình

<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <!-- Cấu hình/ điểm -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
  </div>
  <!-- Slideshows/ carousel -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York" class="d-block w-100">
    </div>
  </div>
  <!-- Điều khiển/ biểu tượng trái phải -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

Thử ngay

Giải thích ví dụ

Mô tả về tác dụng của mỗi loại trong ví dụ trên:

Loại Mô tả
.carousel Tạo lượt chiếu.
.carousel-indicators Thêm chỉ thị cho lượt chiếu. Chúng là những chấm nhỏ ở dưới mỗi slide.
Chỉ ra số lượng slide trong lượt chiếu và slide mà người dùng đang xem.
.carousel-inner Thêm slide vào lượt chiếu.
.carousel-item Định nghĩa nội dung của mỗi slide.
.carousel-control-prev Thêm nút chuyển sang trái (trước) vào lượt chiếu, cho phép người dùng di chuyển ngược lại giữa các slide.
.carousel-control-next Thêm nút chuyển sang phải (tiếp theo) vào lượt chiếu, cho phép người dùng di chuyển giữa các slide.
.carousel-control-prev-icon Kết hợp với .carousel-control-prev để tạo nút "Trước".
.carousel-control-next-icon Kết hợp với .carousel-control-next để tạo nút "Tiếp theo".
.slide Thêm hiệu ứng chuyển đổi và animation CSS khi di chuyển từ một dự án sang dự án tiếp theo.
Nếu bạn không muốn có hiệu ứng này, hãy xóa loại này.

Thêm tiêu đề cho slide

Vui lòng thêm tiêu đề cho mỗi <div class="carousel-item"> Trong <div class="carousel-caption"> Trong đó thêm phần tử, tạo tiêu đề cho mỗi slide:

Mô hình

<div class="carousel-item">
  <img src="beijing.jpg" alt="Bắc Kinh">
  <div class="carousel-caption">
    <h3>Bắc Kinh</h3>
    <p>Cảm ơn, Bắc Kinh!</p>
  </div>
</div>

Thử ngay