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!
Carousel
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.
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.
Crossfade
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.