Cd Carosel Pays Only One Track and Then Stops
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.
Note: Read the API tab to find all available options and advanced customization
Basic example
.jpg)
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
.jpg)
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.jpg)
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
- HTML
<!-- Carousel wrapper --> <div id="carouselBasicExample" class="carousel slide carousel-fade" data-mdb-ride="carousel" > <!-- Indicators --> <div class="carousel-indicators"> <button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="0" class="active" aria-current="true" aria-label="Slide 1" ></button> <button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="1" aria-label="Slide 2" ></button> <button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="2" aria-label="Slide 3" ></button> </div> <!-- Inner --> <div class="carousel-inner"> <!-- Single item --> <div class="carousel-item active"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg" class="d-block w-100" alt="Sunset Over the City" /> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <!-- Single item --> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg" class="d-block w-100" alt="Canyon at Nigh" /> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <!-- Single item --> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg" class="d-block w-100" alt="Cliff Above a Stormy Sea" /> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> </div> </div> </div> <!-- Inner --> <!-- Controls --> <button class="carousel-control-prev" type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <!-- Carousel wrapper --> 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.
In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
Note: Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
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.
Variations
Slides only
Here's a carousel with slides only. Note the presence of the .d-block and .w-100 on carousel images to prevent browser default image alignment.
- HTML
<div id="carouselExampleSlidesOnly" class="carousel slide" data-mdb-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://mdbootstrap.com/img/new/slides/041.jpg" class="d-block w-100" alt="Wild Landscape" /> </div> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/new/slides/042.jpg" class="d-block w-100" alt="Camera" /> </div> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/new/slides/043.jpg" class="d-block w-100" alt="Exotic Fruits" /> </div> </div> </div> With controls
Adding in the previous and next controls:
- HTML
<div id="carouselExampleControls" class="carousel slide" data-mdb-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://mdbootstrap.com/img/new/slides/041.jpg" class="d-block w-100" alt="Wild Landscape" /> </div> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/new/slides/042.jpg" class="d-block w-100" alt="Camera" /> </div> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/new/slides/043.jpg" class="d-block w-100" alt="Exotic Fruits" /> </div> </div> <button class="carousel-control-prev" type="button" data-mdb-target="#carouselExampleControls" data-mdb-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-mdb-target="#carouselExampleControls" data-mdb-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> With indicators
You can also add the indicators to the carousel, alongside the controls, too.
- HTML
<div id="carouselExampleIndicators" class="carousel slide" data-mdb-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="0" class="active" aria-current="true" aria-label="Slide 1" ></button> <button type="button" data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="1" aria-label="Slide 2" ></button> <button type="button" data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="2" aria-label="Slide 3" ></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://mdbootstrap.com/img/new/slides/041.jpg" class="d-block w-100" alt="Wild Landscape" /> </div> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/new/slides/042.jpg" class="d-block w-100" alt="Camera" /> </div> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/new/slides/043.jpg" class="d-block w-100" alt="Exotic Fruits" /> </div> </div> <button class="carousel-control-prev" type="button" data-mdb-target="#carouselExampleIndicators" data-mdb-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-mdb-target="#carouselExampleIndicators" data-mdb-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> 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.
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
- HTML
<div id="carouselExampleCaptions" class="carousel slide" data-mdb-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-mdb-target="#carouselExampleCaptions" data-mdb-slide-to="0" class="active" aria-current="true" aria-label="Slide 1" ></button> <button type="button" data-mdb-target="#carouselExampleCaptions" data-mdb-slide-to="1" aria-label="Slide 2" ></button> <button type="button" data-mdb-target="#carouselExampleCaptions" data-mdb-slide-to="2" aria-label="Slide 3" ></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://mdbootstrap.com/img/new/slides/041.jpg" class="d-block w-100" alt="Wild Landscape" /> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/new/slides/042.jpg" class="d-block w-100" alt="Camera" /> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/new/slides/043.jpg" class="d-block w-100" alt="Exotic Fruits" /> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> </div> </div> </div> <button class="carousel-control-prev" type="button" data-mdb-target="#carouselExampleCaptions" data-mdb-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-mdb-target="#carouselExampleCaptions" data-mdb-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> Crossfade
Use fade transition on your slides easily by adding the .carousel-fade class to any .carousel.
- HTML
<div id="carouselExampleCrossfade" class="carousel slide carousel-fade" data-mdb-ride="carousel" > <div class="carousel-indicators"> <button type="button" data-mdb-target="#carouselExampleCrossfade" data-mdb-slide-to="0" class="active" aria-current="true" aria-label="Slide 1" ></button> <button type="button" data-mdb-target="#carouselExampleCrossfade" data-mdb-slide-to="1" aria-label="Slide 2" ></button> <button type="button" data-mdb-target="#carouselExampleCrossfade" data-mdb-slide-to="2" aria-label="Slide 3" ></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://mdbootstrap.com/img/new/slides/041.jpg" class="d-block w-100" alt="Wild Landscape" /> </div> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/new/slides/042.jpg" class="d-block w-100" alt="Camera" /> </div> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/new/slides/043.jpg" class="d-block w-100" alt="Exotic Fruits" /> </div> </div> <button class="carousel-control-prev" type="button" data-mdb-target="#carouselExampleCrossfade" data-mdb-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-mdb-target="#carouselExampleCrossfade" data-mdb-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> Individual .carousel-item interval
Add data-mdb-interval="" to a .carousel-item to change the amount of time to delay between automatically cycling to the next item.
- HTML
<div id="carouselExampleInterval" class="carousel slide" data-mdb-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active" data-mdb-interval="10000"> <img src="https://mdbootstrap.com/img/new/slides/041.jpg" class="d-block w-100" alt="Wild Landscape" /> </div> <div class="carousel-item" data-mdb-interval="2000"> <img src="https://mdbootstrap.com/img/new/slides/042.jpg" class="d-block w-100" alt="Camera" /> </div> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/new/slides/043.jpg" class="d-block w-100" alt="Exotic Fruits" /> </div> </div> <button class="carousel-control-prev" data-mdb-target="#carouselExampleInterval" type="button" data-mdb-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" data-mdb-target="#carouselExampleInterval" type="button" data-mdb-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> Disable touch swiping
Swiping left/right on touchscreen devices can be disabled by setting the mdb-data-touch attribute to false.
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
- HTML
<div id="carouselExampleTouch" class="carousel slide" data-mdb-touch="false"> <div class="carousel-indicators"> <button type="button" data-mdb-target="#carouselExampleTouch" data-mdb-slide-to="0" class="active" aria-current="true" aria-label="Slide 1" ></button> <button type="button" data-mdb-target="#carouselExampleTouch" data-mdb-slide-to="1" aria-label="Slide 2" ></button> <button type="button" data-mdb-target="#carouselExampleTouch" data-mdb-slide-to="2" aria-label="Slide 3" ></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://mdbootstrap.com/img/new/slides/041.jpg" class="d-block w-100" alt="Wild Landscape" /> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/new/slides/042.jpg" class="d-block w-100" alt="Camera" /> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/new/slides/043.jpg" class="d-block w-100" alt="Exotic Fruits" /> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p> Praesent commodo cursus magna, vel scelerisque nisl consectetur. </p> </div> </div> </div> <button class="carousel-control-prev" type="button" data-mdb-target="#carouselExampleTouch" data-mdb-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-mdb-target="#carouselExampleTouch" data-mdb-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> Dark variant
Add .carousel-dark to the .carousel for darker controls, indicators, and captions.
.jpg)
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
.jpg)
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.jpg)
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
- HTML
<!-- Carousel wrapper --> <div id="carouselDarkVariant" class="carousel slide carousel-fade carousel-dark" data-mdb-ride="carousel" > <!-- Indicators --> <div class="carousel-indicators"> <button data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="0" class="active" aria-current="true" aria-label="Slide 1" ></button> <button data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="1" aria-label="Slide 1" ></button> <button data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="2" aria-label="Slide 1" ></button> </div> <!-- Inner --> <div class="carousel-inner"> <!-- Single item --> <div class="carousel-item active"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(19).jpg" class="d-block w-100" alt="Motorbike Smoke" /> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <!-- Single item --> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(35).jpg" class="d-block w-100" alt="Mountaintop" /> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <!-- Single item --> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(40).jpg" class="d-block w-100" alt="Woman Reading a Book" /> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> </div> </div> </div> <!-- Inner --> <!-- Controls --> <button class="carousel-control-prev" type="button" data-mdb-target="#carouselDarkVariant" data-mdb-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-mdb-target="#carouselDarkVariant" data-mdb-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <!-- Carousel wrapper --> Multi-item carousel
A basic example of a multi carousel with the most common use case with 3 active items (default version).
If you need more advanced options and examples of multi-item carousel have a look at Multi-item Carousel Docs
- HTML
<div class="multi-carousel"> <div class="multi-carousel-inner"> <div class="multi-carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg" alt="Table Full of Spices" class="w-100" /> </div> <div class="multi-carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.jpg" alt="Winter Landscape" class="w-100" /> </div> <div class="multi-carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.jpg" alt="View of the City in the Mountains" class="w-100" /> </div> <div class="multi-carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.jpg" alt="Place Royale Bruxelles" class="w-100" /> </div> </div> <button class="carousel-control-prev" type="button" tabindex="0" data-mdb-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> </button> <button class="carousel-control-next" type="button" tabindex="0" data-mdb-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true"></span> </button> </div> If you want to support our friends from Tailwind Elements you can also check out the Tailwind carousel documentation.
Cd Carosel Pays Only One Track and Then Stops
Source: https://mdbootstrap.com/docs/standard/components/carousel/