Bootstrap 4 Carousel
Bootstrap 4 Carousel
Băng chuyền là một trình chiếu để đi vòng qua các phần tử.
Cách tạo băng chuyền
Ví dụ sau đây cho thấy cách tạo băng chuyền cơ bản với các chỉ báo và điều khiển:
Thí 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ụ
Mô tả về những gì mỗi lớp từ ví dụ trên làm:
| Class | Description |
|---|---|
.carousel |
Creates a carousel |
.carousel-indicators |
Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing) |
.carousel-inner |
Adds slides to the carousel |
.carousel-item |
Specifies the content of each slide |
.carousel-control-prev |
Adds a left (previous) button to the carousel, which allows the user to go back between the slides |
.carousel-control-next |
Adds a right (next) button to the carousel, which allows the user to go forward between the slides |
.carousel-control-prev-icon |
Used together with .carousel-control-prev to create a "previous" button |
.carousel-control-next-icon |
Used together with .carousel-control-next to create a "next" button |
.slide |
Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect |
Thêm chú thích vào trang trình bày
Những thiên thần
Chúng tôi đã có một khoảng thời gian tuyệt vời ở LA!
Chicago
Cảm ơn bạn, Chicago!
Newyork
Chúng tôi yêu Big Apple!
Thêm các phần tử bên <div class="carousel-caption">trong mỗi phần <div
class="carousel-item">để tạo chú thích cho mỗi trang trình bày:
Thí 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>
Toàn bộ tham chiếu băng chuyền Bootstrap
Để có tài liệu tham khảo đầy đủ về tất cả các tùy chọn băng chuyền, phương pháp và sự kiện, hãy truy cập Tham khảo băng chuyền JS Bootstrap của chúng tôi .