Bootstrap 5 Tutorial In Hindi #49 | Carousel Tutorial.

Hello Dear Readers, Today In this Post, You will learn Bootstrap 5 Tutorial In Hindi #49 | Carousel Tutorial. Earlier I have shared the Bootstrap 5 Tutorial In Hindi #48 | Collapse Tutorial. and now it’s time to Bootstrap 5 Carousel Tutorial.


In this tutorial, You will learn full Bootstrap 5. If you want to go deep into the tutorial so you can watch the full video which is below Hope it will help you all thank you for visiting.


In this tutorial, you will learn Bootstrap Tutorial In Hindi, Bootstrap 5 Carousel Tutorial. Here You can learn what is a bootstrap framework, what are the advantages of the bootstrap tutorial in Hindi. Make sure to Subscribe, Share the video, and Like it, for more tutorials in Hindi like this one!



Bootstrap 5 Carousel component

Responsive carousel built with the latest Bootstrap 5. Carousel is a slideshow cycling through different elements such as photos, videos, or text. Many examples and easy tutorials.

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Play Video

How it works

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.


Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit.


The .active class needs to be added to one of the slides otherwise the carousel will not be visible. Also be sure to set a unique id on the .carousel for optional controls, especially if you’re using multiple carousels on a single page. Control and indicator elements must have a data-mdb-target attribute (or href for links) that matches the id of the .carousel element.


With captions

Add captions to your slides easily with the .carousel-caption element within any .carousel-item. They can be easily hidden on smaller viewports, as shown below, with optional display utilities. We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block.



Use fade transition on your slides easily by adding the .carousel-fade class to any .carousel.


Individual .carousel-item interval

Add data-mdb-interval="" to a .carousel-item to change the amount of time to delay between automatically cyc


Disable touch swiping

Swiping left/right on touchscreen devices can be disabled by setting the mdb-data-touch attribute to false.


Dark variant

Add .carousel-dark to the .carousel for darker controls, indicators, and captions.

Leave a Reply

Your email address will not be published.