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 / 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.