Home
Basic Knowledge
Fix Computer
Windows 10
Windows 11
Artificial Intelligence
Space Science
Strange story
Lesson 22: 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 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.
You've just finished reading the article "Lesson 22: Carousel in Bootstrap 5" edited by the TipsMake team. You can save lesson-22-carousel-in-fqnqa.pdf to your computer here to read later or print it out. We hope this article has provided you with many useful tech tips and tricks. You can search for similar articles on tips and guides. Thank you for reading and for following us regularly.
Marvin Fry