Bootstrap Carousels

Bootstrap carousels display a series of text, images, and customs information to the user within a certain duration. It also provides the previous/next controls option to see the upcoming information or before displaying information and indicators that indicate active slider information.

Steps to create basic carousel:

  • Assign the carousel container to a unique ID, .carousel, .slide, and data attribute data-bs-ride="carousel". Please keep in mind that .carousel is used for slides and .slide is used to provide animation and transition effects from one item to the next.
  • Provide .carousel-inner to the carousel container(having <div>.carousel) direct child.
  • Place .carousel-item inside every .carousel-inner element.Assign .active to any of the .acrousel-item to make active of the slide.
  • Place image inside .carousel-item element and provide .d-block &.w-100 to prevent the browser default image alignment.

Example

Source Code

          <div class="container mt-5">
  <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://picsum.photos/seed/picsum/800/300" class="d-block w-100" alt="First Slider" />
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/seed/picsum/800/300" class="d-block w-100" alt="Second Slider" />
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/800/300?grayscale" class="d-block w-100" alt="Third slider" />
      </div>
    </div>
  </div>
</div>
<!--/container-->
        
Try it now

Source Code : Output

Carousel With Controller

Steps to create bootstrap 5 carousel controller:

  • Assign carousel container to a unique ID, .carousel ,.slide and data attribute data-bs-ride="carousel. Please keep in mind that .carousel is used for slides and .slide is used to provide animation and transition effects from one item to the next.
  • Provide .carousel-inner to the carousel container(having <div>.carousel) direct child.
  • Place .carousel-item inside .carousel-inner element.Assign .active to any one of the .acrousel-item to make the active slide.
  • Place image inside .carousel-item element and provide .d-block &.w-100 to prevent the browser default image alignment.
  • Place two <button> or <a> inside the carousel container so that the previous and next control can be created easily.
  • Assign .carousel-control-prev and data attribute data-bs-slide="prev" to first <button> or <a> and .carousel-control-next and data attribute data-bs-slide="next" to the second <button> or <a>.At the end assign data attribute data-bs-target="#carouselId" to both <button> or <a> and provide carousel container id to data-bs-target="#carouselId".Please keep in mind that assigning carousel container ID inside data attribute data-bs-target="#carouselId" is preceded by a hash character(#).
  • To provide previous control and next control icon,inside <button> or <a> use .carousel-control-prev-icon to create previous control inside first <button> and .carousel-control-next-icon to create next control inside second <button> or <a>.Please keep in mind that two mentioned classes will be applied within <span> element that is exist inside <button>

Source Code

          <div class="container mt-5">
  <div id="carouselContainerId" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://picsum.photos/seed/picsum/800/300" class="d-block w-100" alt="First Slider" />
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/seed/picsum/800/300" class="d-block w-100" alt="Second Slider" />
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/800/300?grayscale" class="d-block w-100" alt="Third Slider" />
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselContainerId" data-bs-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-bs-target="#carouselContainerId" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>
<!--/container-->
        
Try it now

Source Code : Output

Carousel With Indicators

Steps to create bootstrap 5 carousel indicators :

  • Assign carousel container to unique ID, .carousel ,.slide and data attribute data-bs-ride="carousel.Please keep in mind that .carousel is used for slides and .slide is used to provide animation and transition effects from one item to the next.
  • Provide .carousel-inner to the carousel container(having <div>.carousel) direct child.
  • Place .carousel-item inside .carousel-inner element .Assign .active to any one of the .acrousel-item to make the active slide.
  • Place image inside .carousel-item element and provide .d-block &.w-100 to prevent the browser default image alignment.
  • Place two <button> or <a> inside the carousel container so that previous and next control can be created easily.
  • Assign .carousel-control-prev and data attribute data-bs-slide="prev" to first <button> or <a> and .carousel-control-next and data attribute data-bs-slide="next" to the second <button> or <a>.At the end assign data attribute data-bs-target="#carouselId" to both <button> or <a> and provide carousel container id to data-bs-target="#carouselId".Please keep in mind that assign carousel container id inside data attribute data-bs-target="#carouselId" is preceded by hash character(#).
  • To provide previous control and next control icon,inside <button> or <a> use .carousel-control-prev-icon to create previous control inside first <button> and .carousel-control-next-icon to create next control inside second <button> or <a>.Please keep in mind that two mentioned classes will be applied within <span> element that is exist inside <button>.
  • Place .carousel-indicators inside carousel container having .carousel.
  • Place <buttons> inside .carousel-indicators and assig data attribute data-bs-target="#carouselContainerId" data-bs-slide-to="{array index value}".Please keep in mind that data attribute data-bs-target is used to take the carousel container id while data attribute data-bs-slide-to is used to provide an array index value that is started with zero.
  • Assign .active to any one of the buttons to make that slide active.

Source Code

          <div class="container mt-5">
  <div id="carouselWithIndicators" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselWithIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselWithIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselWithIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://picsum.photos/seed/picsum/800/300" class="d-block w-100" alt="First Slide" />
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/seed/picsum/800/300" class="d-block w-100" alt="Second Slide" />
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/800/300?grayscale" class="d-block w-100" alt="Third Slide" />
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselWithIndicators" data-bs-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-bs-target="#carouselWithIndicators" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>
<!--/container-->
        
Try it now

Source Code : Output

Carousel With Caption

Steps to create carousel with caption:

  • Assign carousel container to a unique ID, .carousel ,.slide and data attribute data-bs-ride="carousel.Please keep in mind that .carousel is used for slides and .slide is used to provide animation and transition effects from one item to the next.
  • Provide .carousel-inner to the carousel container(having <div>.carousel) direct child.
  • Place .carousel-item inside .carousel-inner element. Assign .active to any one of the .acrousel-item to make the active slide.
  • Place image inside .carousel-item element and provide .d-block &.w-100 to prevent the browser default image alignment.
  • Place two <button> or <a> inside the carousel container so that the previous and next control can be created easily.
  • Assign .carousel-control-prev and data attribute data-bs-slide="prev" to first <button> or <a> and .carousel-control-next and data attribute data-bs-slide="next" to the second <button> or <a>.At the end assign data attribute data-bs-target="#carouselId" to both <button> or <a> and provide carousel container id to data-bs-target="#carouselId".Please keep in mind that assign carousel container id inside data attribute data-bs-target="#carouselId" is preceded by hash character(#).
  • To provide previous control and next control icon,inside <button> or <a> use .carousel-control-prev-icon to create previous control inside first <button> and .carousel-control-next-icon to create next control inside second <button> or <a>.Please keep in mind that two mentioned classes will be applied within <span> element that is exist inside <button>.
  • Place .carousel-indicatorsinside carousel container having .carousel.
  • Place <buttons> inside .carousel-indicators and assig data attribute data-bs-target="#carouselContainerId" data-bs-slide-to="{array index value}".Please keep in mind that data attribute data-bs-target is used to take the carousel container id while data attribute data-bs-slide-to is used to provide an array index value that is started with zero.
  • Assign .active to any one of the buttons to make that slide active.
  • To create caption inside carousel ,assign .carousel-caption ,.d-none,d-md-block to the element that is under .carousel-item.

Source Code

          <div class="container mt-5">
  <div id="carouselAllFeatures" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselAllFeatures" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselAllFeatures" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselAllFeatures" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://picsum.photos/seed/picsum/800/300" class="d-block w-100" alt="First Slidet" />
        <div class="carousel-caption d-none d-md-block">
          <h5>First slide label</h5>
          <p>Some representative placeholder content for the first slide.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/seed/picsum/800/300" class="d-block w-100" alt="Second Slider" />
        <div class="carousel-caption d-none d-md-block">
          <h5>Second slide label</h5>
          <p>Some representative placeholder content for the second slide.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/800/300?grayscale" class="d-block w-100" alt="Third Slider" />
        <div class="carousel-caption d-none d-md-block">
          <h5>Third slide label</h5>
          <p>Some representative placeholder content for the third slide.</p>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselAllFeatures" data-bs-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-bs-target="#carouselAllFeatures" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>
<!--/container-->
        
Try it now

Source Code : Output

Online Test / Quiz

Web Tutorials

Bootstrap Carousels
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4