Menu Bài Viết:

Bootstrap 4 Carousel

Carousel hay còn gọi là slideshow.

Cách để tạo một Carousel

Ví dụ sau đây cho thấy cách tạo một carousel cơ bản:

Ví dụ

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</div>

Giải thích ví dụ

Sau đây là bảng mô tả về những gì mỗi class từ ví dụ trên làm:

Class	Description
.carousel	Tạo carousel
.carousel-indicators	Add các dot bên dưới carousel (Mỗi dot tượng trưng cho 1 slide, dot nào sáng là đang ở silde đó, số dot chính là số slide hiện có trong carousel)
.carousel-inner	Add slides cho carousel
.carousel-item	Chỉ định nội dung của từng slide
.carousel-control-prev	Add mũi tên trái (previous button) cho carousel, cho phép người dùng quay trở lại giữa các slide
.carousel-control-next	Adds mũi tên phải (next button) cho carousel, cho phép người dùng đi tiếp giữa các slide
.carousel-control-prev-icon	Được sử dụng cùng với class .carousel-control-prev để tạo "previous" button
.carousel-control-next-icon	Được sử dụng cùng với class .carousel-control-next để tạo "next" button
.slide	Thêm hiệu ứng chuyển tiếp và hiệu ứng CSS khi trượt sang mục tiếp theo. Xóa class này nếu bạn không muốn hiệu ứng đó

Add Captions cho các Slide

Los Angeles

We had such a great time in LA!

Chicago

Thank you, Chicago!

New York

We love the Big Apple!

Ví dụ

<div class="carousel-item">
  <img src="la.jpg" alt="Los Angeles">
  <div class="carousel-caption">
    <h3>Los Angeles</h3>
    <p>We had such a great time in LA!</p>
  </div>
</div>