Bài 22: Carousel trong Bootstrap 5
Carousel trong Bootstrap 5 là một plugin được dùng để duyệt các phần tử như slide, ảnh… Dưới đây là cách dùng Carousel trong Bootstrap 5.
Carousel / Slideshow trong Bootstrap 5
Carousel trong Bootstrap 5 là một slideshow chạy qua một loạt ảnh hoặc nhân tố khác.
Cách tạo carousel trong Bootstrap 5
Code mẫu sau hiện cách tạo một slideshow cơ bản với các chỉ báo và điều khiển:
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York" class="d-block w-100">
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
Giải thích chi tiết:
Class | Mô tả |
---|---|
.carousel | Tạo một carousel |
.carousel-indicators | Thêm chỉ báo cho carousel. Chúng là những chấm nhỏ nằm ở phía dưới của slide (cho bạn biết số lượng slide có trong carousel và hiện đang xem slide nào.) |
.carousel-inner | Thêm slide vào carousel |
.carousel-item | Nội dung của từng slide |
.carousel-control-prev | Thêm nút xem lại slide trước đó vào carousel, cho phép người dùng quay lại slide vừa xem |
.carousel-control-next | Thêm nút bên phải hay 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 dùng cùng với .carousel-control-prev để tạo một nút bấm trước đó. |
.carousel-control-next-icon | Được dùng với .carousel-control-next để tạo nút bấm tiếp theo. |
.slide | Thêm chuyển tiếp CSS và hiệu ứng động khi chuyển tiếp giữa các mục. Loại bỏ class này nếu bạn không muốn hiệu ứng đó. |
Thêm chú thích vào slide
Thêm thành phần vào bên trong <div class="carousel-caption">
với từng <div class="carousel-item">
để tạo một chú thích cho từng slide:
Code mẫu:
<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>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" class="d-block" style="width:100%">
<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" class="d-block" style="width:100%">
<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" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<div class="container-fluid mt-3">
<h3>Ví dụ về tạo slide trong Bootstrap 5</h3>
</div>
</body>
</html>
Như bạn thấy, cách tạo slide hay dùng carousel để tạo slide trình chiếu rất dễ. Bạn chỉ cần áp dụng code kể trên và thay nội dung cùng hình mong muốn cho web. Hi vọng bài viết hữu ích với các bạn.
Bạn nên đọc
-
Bài 21: Navbar trong Bootstrap 5
-
Bài 10: Button trong Bootstrap 5
-
Bài 17: Cards trong Bootstrap 5
-
Bài 6: Bảng trong Bootstrap 5
-
Bài 7: Ảnh trong Bootstrap 5
-
Bài 3: Hệ thống lưới Grid System trong Bootstrap 5
-
Bài 19: Cách dùng Collapse trong Bootstrap 5
-
Bài 18: Tạo menu xổ xuống trong Bootstrap 5
-
Bài 20: Navs trong Bootstrap 5
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Cách tải LOL PBE, tạo tài khoản PBE DTCL mùa 14 Thành Phố Công Nghệ
Hôm qua 17 -
57+ câu đố về địa danh Việt Nam
Hôm qua 5 -
Cách tắt Windows Update trên Windows 10, tắt update win 10 vĩnh viễn
Hôm qua 18 -
Hình ảnh chào buổi sáng, hình ảnh chào ngày mới đẹp
Hôm qua -
Icon chim cánh cụt có nghĩa là gì?
Hôm qua -
10 phần mềm benchmark miễn phí tốt nhất dành cho Windows
Hôm qua -
Ảnh Free Fire giàu, ảnh nick Free Fire giàu, ảnh acc Free Fire giàu
Hôm qua -
Email "Facebook Protect" từ "Security@facebookmail.com" có hợp pháp không?
Hôm qua -
6 cách xóa file vĩnh viễn trên Windows
Hôm qua 3 -
Hướng dẫn cách đăng nhập vào máy tính khi quên mật khẩu
Hôm qua 1