Bootstrap 4 - Bootstrap Carousel
Tạo carousel bằng bootstrap
Carousel là 1 plugin trong bootstrap nói riêng và jquery nói chung dùng để duyệt các phần tử (hình ảnh, slide, …) tuần tự xoay vòng, tương tự như 1 slideshow (trình chiếu). Để xây dựng carousel, bạn có thể nhúng tập tin “carousel.js” độc lập hoặc nhúng “bootstrap.js” hay “bootstrap.min.js” có sẵn trong Bootstrap.
Tạo carousel đơn giản
Đầu tiên, chúng ta tạo 1 đoạn HTML như thế này:
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
<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" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York" width="1100" height="500">
</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>
Bây giờ tôi sẽ đi giải thích chi tiết các thành phần của carousel dựa trên đoạn HTML như sau:
- Phần tử div ngoài cùngcó:
- ** id="carousel-simple"** dùng để định nghĩa 1 carousel. Các button điều khiển (next, prev) hay Indicators sẽ thông qua id này để giúp chúng ta có thể thao tác xem slide tiếp theo hoặc slide trước đó. Nếu không tin, bạn có thể xóa id này trong phần control hoặc Indicators là biết liền. Sẽ không thể thao tác lên các phần này để xem phần slide mới hoặc quay lại xem slide cũ ngay lập tức. Muốn xem slide tiếp theo phải đợi auto next còn xem ảnh cũ hả, cứ đợi nó chạy hết 1 vòng nhé.
- class .carousel để mô tả thẻ div này chứa 1 carousel. Bạn có thể sử dụng class này trong script để thay đổi các option cho carousel. Các option của carousel là gì thì tôi sẽ nói ở phần sau.
- class .slide để thêm các hiệu ứng động và chuyển tiếp, làm cho 1 đối tượng sẽ có hiệu ứng trượt khi hiển thị mới, nếu bạn không muốn có hiệu ứng này thì bỏ qua không định nghĩa.
- Thuộc tính data-ride=”carousel” nhằm kích hoạt hiệu ứng hoạt hình sẽ lập tức hoạt động khi trang được tải.
- Phần “Indicators”: Là các chấm tròn màu xanh ở dưới slide như ảnh demo bên trên. Phần này cho chúng ta biết số phần tử slide hiện có và slide nào đang được hiển thị trong carousel này. Phần này có 2 thuộc tính cơ bản:
- Thuộc tính data-target để chỉ đến id của carousel. Như trên tôi đã giải thích. Thông qua id của carousel, chúng ta có thể thao tác lên các phần tử slide. Chẳng hạn bạn muốn xem slide tiếp hoặc slide trước đó, bạn cũng có thể click vào các chấm tròn này thay vì click vào các button control.
- Thuộc tính data-slide-to dùng để truyền chỉ số của một slide. Nó có tác dụng chuyển vị trí slide tới một vị trí có chỉ số cụ thể tính từ 0.
- Phần “Wrapper for slides” được định nghĩa bên trong thẻ div với class .carousel-inner. Nội dung của mỗi slide sẽ được định nghĩa trong class .item, nội dung này có thể là hình ảnh hoặc văn bản. Class .active để mô tả slide nào đang được hiển thị.
- Phần “Left and right controls” là các nút cho phép người dùng xem hình ảnh trước sau khi nhấn chuột lên các nút này. Thuộc tính data-slide cho phép dùng từ khóa “prev” hay “next”, để định nghĩa vị trí tiếp theo của 1 slide dựa vào vị trí của slide hiện tại.
Thêm caption cho carousel
Để thêm caption vào các slide trong 1 carousel, đơn giản là thêm phần tử div class=”carousel-caption” bên trong mỗi phần tử div class=”item” để tạo chú thích cho mỗi slide. Bạn hãy chèn bất kỳ mã HTML nào vào trong caption đó và nó sẽ được định dạng và căn chỉnh một cách tự động.
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
<div id="demo" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" width="1100" height="500">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago" width="1100" height="500">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York" width="1100" height="500">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<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>