Bootstrap 5 Carousel

Bootstrap 5 carousel displays 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 carousel container to unique id , .carousel ,.slide and data attribute data-bs-ride="carousel.Please keep in mind that .carousel is used for slide and .slide is used to provide animation and transition effect 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.

Let us understand it with the help of an example.

Example

Source Code

Try it now

Source Code : Output

Code Explanation

Note: Follow the above mention concept to create a bootstrap basic carousel system.

Carousel With Controller

Steps to create bootstrap 5 carousel controller:

Assign carousel container to unique id , .carousel ,.slide and data attribute data-bs-ride="carousel.Please keep in mind that .carousel is used for slide and .slide is used to provide animation and transition effect 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 carousel container so that prevous 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 mention 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

Code Explanation

Note:Follow the above mention concept to create a bootstrap basic carousel controller system.

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 slide and .slide is used to provide animation and transition effect 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 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 mention 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 as data attribute data-bs-slide-to is used to provide array index value that is started with zero.
Assign .active to any one of the button 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

Code Explanation

Note: Follow the above mention concept to create a bootstrap basic carousel controller system.

Carousel With Caption

Steps to create carousel with caption:

Assign carousel container to unique id , .carousel ,.slide and data attribute data-bs-ride="carousel.Please keep in mind that .carousel is used for slide and .slide is used to provide animation and transition effect 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 carousel container so that prevous 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 mention 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 as data attribute data-bs-slide-to is used to provide array index value that is started with zero.
Assign .active to any one of the button 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

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

Code Explanation

Note:Follow the above mention concept to create a bootstrap carousel system.

Online Test / Quiz

Question set 1

Bootstrap 5 Carousel

Example

Source Code

Source Code : Output

Code Explanation

Carousel With Controller

Source Code

Source Code : Output

Code Explanation

Carousel With Indicators

Source Code

Source Code : Output

Code Explanation

Carousel With Caption

Source Code

Source Code : Output

First slide label

Second slide label

Third slide label

Code Explanation

Online Test / Quiz

Our Tutorials