Carousel in Bootstrap 5 is a plugin used to browse elements such as slides, images, etc. Below is how to use Carousel in Bootstrap 5.
Carousel in Bootstrap 5 is a plugin used to browse elements such as slides, images, etc. Below is how to use Carousel in Bootstrap 5 .
Carousel / Slideshow in Bootstrap 5
A carousel in Bootstrap 5 is a slideshow that runs through a series of images or other elements.
How to create a carousel in Bootstrap 5
The following sample code shows how to create a basic slideshow with indicators and controls:
Detailed explanation:
| 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 đó. |
Add annotations to slides.
Add elements inside each slide to create a caption for each slide:
Sample code:
Los Angeles
We had such a great time in LA!
For example:
Bootstrap Example Los Angeles
We had such a great time in LA!
Chicago
Thank you, Chicago!
New York
We love the Big Apple!
Example of creating slides in Bootstrap 5
As you can see, creating slides or using a carousel to create a presentation slideshow is very easy. You just need to apply the code above and replace the content and images as desired for your website. I hope this article is helpful to you.