Bootstrap 5 Tutorial
BS5 Carousel
Previous Page
Next Page

Bootstrap Carousel

Bootstrap carousel displays 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.

Basic Carousel Syntax

Steps to create basic carousel:

  • Step1: 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.
  • Step2: Provide .carousel-inner to the carousel container(having <div>.carousel) direct child.
  • Step3 Place .carousel-item inside every .carousel-inner element.Assign .active to any of the .acrousel-item to make active of the slide.
  • Step4: Place image inside .carousel-item element and provide .d-block &.w-100 to prevent the browser default image alignment.

General Syntax 

      <div id="carouselSliderContainerId" 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>

</div>
Try It Now

Source Code 

    <div id="carouselSliderContainerId" 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/seed/picsum/800/300" class="d-block w-100" alt="Third slider">
      
    </div>
    
  </div>
  
</div>
Try it yourself

Source Code : Output

Carousel With Controller

Steps to create carousel with controls:

  • Step1: 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.
  • Step2: Provide .carousel-inner to the carousel container(having <div>.carousel) direct child.
  • Step3 Place .carousel-item inside .carousel-inner element.Assign .active to any one of the .acrousel-item to make the active slide.
  • Step4: Place image inside .carousel-item element and provide .d-block &.w-100 to prevent the browser default image alignment.
  • Step5:Place two <button> or <a> inside carousel container so that prevous and next control can be created easily.
  • Step5: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(#).
  • Step6: 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>

General Syntax 

      <div id="carouselExampleControls" 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="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
Try It Now

Source Code 

    <div id="carouselExampleControls" 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="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
Try it yourself

Source Code : Output

Carousel With Indicators

Steps to create carousel with indicator:

  • Step1: 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.
  • Step2: Provide .carousel-inner to the carousel container(having <div>.carousel) direct child.
  • Step3 Place .carousel-item inside .carousel-inner element.Assign .active to any one of the .acrousel-item to make the active slide.
  • Step4: Place image inside .carousel-item element and provide .d-block &.w-100 to prevent the browser default image alignment.
  • Step5:Place two <button> or <a> inside carousel container so that prevous and next control can be created easily.
  • Step5: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(#).
  • Step6: 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>.
  • Step7:Place .carousel-indicators inside carousel container having .carousel.
  • Step8: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.
  • Step9: Assign .active to any one of the button to make that slide active.

General Syntax 

      <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>
Try It Now

Source Code 

    <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>
Try it yourself

Source Code : Output

Carousel With Caption

Steps to create carousel with caption:

  • Step1: 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.
  • Step2: Provide .carousel-inner to the carousel container(having <div>.carousel) direct child.
  • Step3 Place .carousel-item inside .carousel-inner element.Assign .active to any one of the .acrousel-item to make the active slide.
  • Step4: Place image inside .carousel-item element and provide .d-block &.w-100 to prevent the browser default image alignment.
  • Step5:Place two <button> or <a> inside carousel container so that prevous and next control can be created easily.
  • Step5: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(#).
  • Step6: 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>.
  • Step7:Place .carousel-indicatorsinside carousel container having .carousel.
  • Step8: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.
  • Step9: Assign .active to any one of the button to make that slide active.
  • Step10:To create caption inside carousel ,assign .carousel-caption ,.d-none,d-md-block to the element that is under .carousel-item.

General Syntax 

      <div class="container">
    <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 

    <div class="container">
    <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 yourself

Source Code : Output

Online Test / Quiz
Question set 1
Web Tutorials
Bootstrap Carousel
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS
Tutorials HTML CSS BOOTSTRAP 5 BOOTSTRAP 4
Performance Evalution HTML Quiz/Test CSS Quiz/Test Bootstrap 4 Quiz/Test Bootstrap 5 Quiz/Test
CSS Frameworks Materialize CSS Pure CSS UiKit CSS Bulma CSS