The Bootstrap carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.
Example
Copy
< div class = " row" >
< div class = " col-md-8 mx-auto" >
< div id = " carouselExampleIndicators" class = " carousel slide" data-bs-ride = " carousel" >
< ol class = " carousel-indicators" >
< li data-target = " #carouselExampleIndicators" data-bs-slide-to = " 0" class = " active" > </ li>
< li data-target = " #carouselExampleIndicators" data-bs-slide-to = " 1" > </ li>
< li data-target = " #carouselExampleIndicators" data-bs-slide-to = " 2" > </ li>
</ ol>
< div class = " carousel-inner" >
< div class = " carousel-item active" >
< img class = " d-block w-100" src = " https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/products/product-1-min.jpg" alt = " First slide" >
</ div>
< div class = " carousel-item" >
< img class = " d-block w-100" src = " https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/products/product-2-min.jpg" alt = " Second slide" >
</ div>
< div class = " carousel-item" >
< img class = " d-block w-100" src = " https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/products/product-3-min.jpg" alt = " Third slide" >
</ div>
</ div>
< a class = " carousel-control-prev" href = " #carouselExampleIndicators" role = " button" data-bs-slide = " prev" >
< span class = " carousel-control-prev-icon" aria-hidden = " true" > </ span>
< span class = " sr-only" > Previous</ span>
</ a>
< a class = " carousel-control-next" href = " #carouselExampleIndicators" role = " button" data-bs-slide = " next" >
< span class = " carousel-control-next-icon" aria-hidden = " true" > </ span>
< span class = " sr-only" > Next</ span>
</ a>
</ div>
</ div>
</ div>
Example PRO
Copy
< div id = " carouselExampleControls" class = " carousel slide" data-bs-ride = " carousel" >
< div class = " carousel-inner mb-4" >
< div class = " carousel-item" >
< div class = " page-header min-vh-75 m-3 border-radius-xl" style =" background-image : url ( 'https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/products/product-3-min.jpg') ; " >
< span class = " mask bg-gradient-dark" > </ span>
< div class = " container" >
< div class = " row" >
< div class = " col-lg-6 my-auto" >
< h4 class = " text-white mb-0 fadeIn1 fadeInBottom" > Pricing Plans</ h4>
< h1 class = " text-white fadeIn2 fadeInBottom" > Work with the rockets</ h1>
< p class = " lead text-white opacity-8 fadeIn3 fadeInBottom" > Wealth creation is an evolutionarily recent positive-sum game. Status is an old zero-sum game. Those attacking wealth creation are often just seeking status.</ p>
</ div>
</ div>
</ div>
</ div>
</ div>
< div class = " carousel-item" >
< div class = " page-header min-vh-75 m-3 border-radius-xl" style =" background-image : url ( 'https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/products/product-1-min.jpg') ; " >
< span class = " mask bg-gradient-dark" > </ span>
< div class = " container" >
< div class = " row" >
< div class = " col-lg-6 my-auto" >
< h4 class = " text-white mb-0 fadeIn1 fadeInBottom" > Our Team</ h4>
< h1 class = " text-white fadeIn2 fadeInBottom" > Work with the best</ h1>
< p class = " lead text-white opacity-8 fadeIn3 fadeInBottom" > Free people make free choices. Free choices mean you get unequal outcomes. You can have freedom, or you can have equal outcomes. You can’t have both.</ p>
</ div>
</ div>
</ div>
</ div>
</ div>
< div class = " carousel-item active" >
< div class = " page-header min-vh-75 m-3 border-radius-xl" style =" background-image : url ( 'https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/products/product-2-min.jpg') ; " >
< span class = " mask bg-gradient-dark" > </ span>
< div class = " container" >
< div class = " row" >
< div class = " col-lg-6 my-auto" >
< h4 class = " text-white mb-0 fadeIn1 fadeInBottom" > Office Places</ h4>
< h1 class = " text-white fadeIn2 fadeInBottom" > Work from home</ h1>
< p class = " lead text-white opacity-8 fadeIn3 fadeInBottom" > You’re spending time to save money when you should be spending money to save time.</ p>
</ div>
</ div>
</ div>
</ div>
</ div>
</ div>
< div class = " min-vh-75 position-absolute w-100 top-0" >
< a class = " carousel-control-prev" href = " #carouselExampleControls" role = " button" data-bs-slide = " prev" >
< span class = " carousel-control-prev-icon position-absolute bottom-50" aria-hidden = " true" > </ span>
< span class = " visually-hidden" > Previous</ span>
</ a>
< a class = " carousel-control-next" href = " #carouselExampleControls" role = " button" data-bs-slide = " next" >
< span class = " carousel-control-next-icon position-absolute bottom-50" aria-hidden = " true" > </ span>
< span class = " visually-hidden" > Next</ span>
</ a>
</ div>
</ div>
Copy
< div class = " carousel-item" >
< img src = " ..." alt = " ..." >
< div class = " carousel-caption d-none d-md-block" >
< h5> ...</ h5>
< p> ...</ p>
</ div>
</ div>