Carousel được định nghĩa là thành phần dùng để duyệt các phần tử (hình ảnh, slide, …) tuần tự xoay vòng, Carousel tương tự như 1 slideshow (trình chiếu) . Trong bài viết này chúng ta sẽ tìm hiểu về cách dùng Carousel trong Bootstrap 4 các bạn nhé!
Cách tạo Carousel trong Bootstrap 4
Ví dụ sau đây cho thấy cách tạo Carousel cơ bản với các chỉ báo và điều khiển:
<div class="container"> <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="gx1.jpg" alt="gx1" width="1100" height="400"> </div> <div class="carousel-item"> <img src="gx2.jpg" alt="gx2" width="1100" height="400"> </div> <div class="carousel-item"> <img src="gx3.jpg" alt="gx3" width="1100" height="400"> </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> </div>
Giải thích ví dụ
Mô tả về những gì mỗi lớp từ ví dụ trên làm:
- .carousel Tạo carousel
- .carousel-indicator Thêm các chỉ báo cho băng chuyền. Đây là những chấm nhỏ ở cuối mỗi trang trình bày (cho biết có bao nhiêu trang trình bày trong carousel và slide mà người dùng hiện đang xem)
- .carousel-inner Thêm các slide vào carousel
- .carousel-item Chỉ định nội dung của từng slide
- .carousel-control-prev Thêm một nút bên trái (trước) vào carousel, cho phép người dùng quay lại giữa các slide
- .carousel-control-next Thêm một nút bên phải (tiếp theo) vào carousel, cho phép người dùng chuyển tiếp giữa các slide
- .carousel-control-prev-icon Được sử dụng cùng với .carousel-control-prev để tạo nút "trước đó"
- .carousel-control-next-icon Được sử dụng cùng với .carousel-control-next để tạo nút "tiếp theo"
- .slide Thêm hiệu ứng chuyển tiếp CSS và hoạt ảnh khi trượt từ mục này sang mục tiếp theo. Xóa lớp này nếu bạn không muốn hiệu ứng này
Thêm chú thích (Captions) vào Slides
Thêm các phần tử bên trong <div class = "carousel-caption"> trong mỗi <div class = "carousel-item"> để tạo chú thích cho slide.
<div class="container"> <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="gx1.jpg" alt="gx1" width="1100" height="400"> <div class="carousel-caption"> <h3>ARIN</h3> <p>Thành viên nhóm nhạc nữ Hàn Quốc OH MY GIRL</p> </div> </div> <div class="carousel-item"> <img src="gx2.jpg" alt="gx2" width="1100" height="400"> <div class="carousel-caption"> <h3>LUDA</h3> <p>Nữ ca sĩ Hàn Quốc LUDA xinh đẹp</p> </div> </div> <div class="carousel-item"> <img src="gx3.jpg" alt="gx3" width="1100" height="400"> <div class="carousel-caption"> <h3>NARA</h3> <p>Thành viên nhóm nhạc nữ Hàn Quốc Hello Venus</p> </div> </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> </div>
Lời kết:
Trên đây là cách tạo 1 Carousel trong Bootstrap 4, rất đơn giản phải không nào. Thông thường Carousel thường đi kèm chú thich trong Bootstrap 4 và mỗi slide sẽ liên kết đến 1 bài viết để thu hút người xem hơn.
