MENU


Carousel

A carousel is a slideshow cycling through a series of images, text, or custom markup.

For more advanced carousels, use Wow Slider.

Add .carousel-fade to your carousel to animate slides with a fade transition instead of a slide. For more fanciful sliding effects, consider using WowSlider.
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

   <div id="carouselExampleCaptions" class="carousel slide carousel-dark" data-ride="carousel">
       <ol class="carousel-indicators">
           <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
           <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
           <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
       </ol>
       <div class="carousel-inner">
           <div class="carousel-item active" data-interval="10000">
               <img src="castle1.webp" class="d-block w-100" alt="castle 1" width="800" height="500"/>
               <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" data-interval="5000">
               <img src="/shared/castle2.jpg" class="d-block w-100" alt="castle 2" width="800" height="500"/>
               <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="/shared/castle3.jpg" class="d-block w-100" alt="castle 3" width="800" height="500"/>
               <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>
       <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
           <span class="carousel-control-prev-icon" aria-hidden="true"></span>
           <span class="visually-hidden">Previous</span>
       </a>
       <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
           <span class="carousel-control-next-icon" aria-hidden="true"></span>
           <span class="visually-hidden">Next</span>
       </a>
   </div>

</body><html>


Options:
   interval: The number of milliseconds to delay between automatic cycling. Defaults to 'false'.
   keyboard: Whether to react to keyboard events. Defaults to 'true'.
   pause: Whether to pause on mouseover. Defaults to 'hover'. Eg. 'false'.
   slide: Whether to autoplay after the user cycles the first item. Defaults to 'false'. Eg. 'carousel'.
   wrap: Whether to cycle continuously or have hard stops. Defaults to 'true'.
   touch: Whether to support left/right swipes on touchscreens. Defaults to 'true'.

Pass the options in an object literal in Javascript, or use data-* attributes, eg. data-interval="3000".

JavaScript:

var myCarousel = document.querySelector('#myCarousel'); var carousel = new bootstrap.Carousel(myCarousel, { interval: 2000, wrap: false });var myCarousel = document.getElementById('myCarousel'); myCarousel.addEventListener('slide.bs.carousel',event => { // do something... });var myCarousel = document.getElementById('myCarousel'); myCarousel.addEventListener('slid.bs.carousel', ev => { /* do something... ev.direction, ev.relatedTarget, ev.from, ev.to */ });