Bootstrap Carousel
The Bootstrap carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.
Example
<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
<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>
<div class= "carousel-item" >
<img src= "..." alt= "..." >
<div class= "carousel-caption d-none d-md-block" >
<h5> ...</h5>
<p> ...</p>
</div>
</div>