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 3: Hệ thống lưới Grid System trong Bootstrap 5
-
Bài 7: Ảnh trong Bootstrap 5
-
Bài 21: Navbar trong Bootstrap 5
-
Bài 20: Navs trong Bootstrap 5
-
Bài 19: Cách dùng Collapse trong Bootstrap 5
-
Bài 10: Button trong Bootstrap 5
-
Bài 6: Bảng trong Bootstrap 5
-
Bài 4: Typography trong Bootstrap 5
-
Bài 18: Tạo menu xổ xuống 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
-
Tổng hợp bài tập JavaScript có code mẫu
Hôm qua 1 -
Các cách căn giữa ô trong bảng trên Word
Hôm qua 1 -
8 bước khắc phục sự cố mất âm thanh trong Windows
Hôm qua 2 -
Cách kiểm tra phiên bản Excel đang sử dụng
Hôm qua -
Cách tải và cập nhật driver Bluetooth cho Windows 10
Hôm qua -
Bao nhiêu người có thể sử dụng cùng lúc một tài khoản Netflix?
Hôm qua -
Những câu hỏi đáng suy ngẫm về giá trị cuộc sống
Hôm qua -
Lệnh ALTER TABLE trong SQL Server
Hôm qua -
Cách hiện đuôi file, xem phần mở rộng file trên Windows 11/10/7/8
Hôm qua -
Khắc phục sự cố không thể chạy được file .exe
Hôm qua 4