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 .

 

A carousel in Bootstrap 5 is a slideshow that runs through a series of images or other elements.

The following sample code shows how to create a basic slideshow with indicators and controls:

      Los Angeles Chicago New York    

 

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

Los Angeles

We had such a great time in LA!

For example:

 Bootstrap Example       Los Angeles

Los Angeles

We had such a great time in LA!

 Chicago

Chicago

Thank you, Chicago!

 New York

New York

We love the Big Apple!

   

Example of creating slides in Bootstrap 5

Picture 1 of Lesson 22: Carousel 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.

« PREV Lesson 20: Navs in Bootstrap 5
NEXT » Lesson 23: Modals in Bootstrap 5