Khi nhắc đến "carousel", người ta thường nghĩ đến trò chơi ngựa gỗ quay vòng ở công viên giải trí. Bootstrap Carousel không phải loại đó, nhưng khái niệm có điểm tương đồng: nội dung xoay vòng/hiển thị lần lượt.
Bài viết này xem xét cách bắt đầu với Bootstrap, khái niệm thành phần UI Carousel, khi nào nên dùng, và cách xây dựng nó với framework Bootstrap.
Bắt Đầu
Để thiết lập Bootstrap Carousel, cần các dependency: Bootstrap, PopperJS, và jQuery. Xem trang Quick Start của Bootstrap để thêm chúng vào dự án.
Cách dễ nhất, thân thiện với người mới: dùng CDN (Content Delivery Network) cho jQuery, Popper.js, và Bootstrap. Lưu ý thứ tự thẻ <script> – thứ tự rất quan trọng.
Bây giờ bạn đã sẵn sàng!
Sử Dụng Tài Liệu Bootstrap Để Tạo Carousel
Trên trang Introduction/Getting Started, thanh bên (sidebar) có link Components. Click vào, component đầu tiên là Alerts. Tiếp tục tìm link Carousel trên sidebar và click để xem tài liệu chi tiết.
Cơ Chế Hoạt Động
Bootstrap tận dụng thuộc tính CSS transform và JavaScript để vận hành carousel chuyển từ slide này sang slide khác. Carousel cơ bản là chuỗi hình ảnh hoặc markup chuyển đổi sau một khoảng thời gian cố định.
Cấu Trúc Cơ Bản
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Bootstrap Carousel</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="..." class="d-block w-100" alt="..."> </div> <div class="carousel-item"><img src="..." class="d-block w-100" alt="..."></div> <div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html>
Giải thích các thuộc tính quan trọng:
| Thuộc tính | Ý nghĩa |
data-ride="carousel" | Tự động chạy animation khi tải trang. |
data-interval="false | [ms]" | False = không tự chạy. Số = chu kỳ chuyển slide (milliseconds). |
data-pause="hover" | Tạm dừng khi chuột hover, tiếp tục khi chuột rời khỏi. |
class="active" | Đánh dấu slide nào hiển thị đầu tiên. |
class="d-block" | display: block; |
class="w-100" | width: 100%; |
Thêm Điều Khiển (Controls: Prev/Next)
Bootstrap cung cấp điều khiển mũi tên Prev/Next. JavaScript xử lý khi người dùng click.
Điểm then chốt: href của nút điều khiển phải khớp với id của div bao ngoài carousel.
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">...</a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">...</a> <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">...</div>
Thêm Chỉ Thị (Indicators: Dấu Chấm Dưới)
Indicators hiển thị số lượng slide và slide hiện tại. Có thể dùng cùng với Controls.
<ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol>
Danh sách có thứ tự (<ol>) này hiển thị các chấm chỉ thị. Lớp .active khớp với .active trong carousel-item.
Kết Luận
Thông tin khá nhiều, nhưng điều chính: chỉ cần làm theo tài liệu. Tài liệu Bootstrap rất chi tiết, không cần thuộc lòng.
Nên tìm hiểu cách Bootstrap hoạt động bên dưới (xem file CSS/JS minified). Hiểu rõ ý nghĩa các attribute trong ví dụ để tùy biến cho dự án.
Lưu ý truy cập (accessibility): Carousel có thể không phù hợp về mặt accessibility. Đảm bảo thông tin trong carousel cũng có ở nơi khác trên trang.
Chúc bạn thành công trên hành trình khám phá Bootstrap!