Bootstrap 5 Carousel

Bootstrap five provides Carousel that could be a slideshow part for the sport through components. It is enclosed within the webpage victimization bootstrap.js or bootstrap.min.js. Carousels don’t seem to be supported properly in web somebody, this can be as a result of they use CSS3 transitions and animations to attain the slide impact. it’s engineered with CSS 3D transforms and a small amount of JavaScript.

Example:-

Carousels don’t mechanically normalize slide dimensions. As such, you will get to use further utilities or custom designs to befittingly size content. whereas carousels support previous/next controls and indicators, they’re not expressly needed. Add and customize as you see match.

The .active category has to be intercalary to 1 of the slides otherwise the carousel won’t be visible. even be certain to set a novel id on the .carousel for facultative controls, particularly if you’re victimizing multiple carousels on one page. management and indicator parts should have a data-bs-target attribute (or href for links) that matches the id of the .carousel component.

Note:- First Add Bootstrap 5 link add | Bootstrap 5 CDN Available.

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

Only Carousel Slides | Slides Solely

Here’s a carousel with slides solely. Note the presence of the .d-block and .w-100 on carousel pictures to forestall browser default image alignment.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

output:-

Carousel With Controls

Adding within the previous and next controls. we tend to advocate mistreatment parts, however, you’ll be able to additionally use parts with the role=” button”.

<div id="Controls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
      <div class="carousel-item active">
      <img class="d-block" src="https://i.ibb.co/RpmmZ7s/html-slider-1.jpg" width="100%" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block" src="https://i.ibb.co/WFjZZVS/html-slider-2.jpg" width="100%" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block" src="https://i.ibb.co/cCwb0mg/html-slider-3.jpg" width="100%" alt="Third slide">
    </div>
  </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#Controls" 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="#Controls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Output:-

Carousel With Indicators

You can additionally add the indications to the carousel, aboard the controls, too.

<div id="Indicators" class="carousel slide" data-bs-ride="carousel">
 	  <div class="carousel-indicators">
    <button type="button" data-bs-target="#Indicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#Indicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#Indicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
      <div class="carousel-item active">
      <img class="d-block" src="https://i.ibb.co/RpmmZ7s/html-slider-1.jpg" width="100%" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block" src="https://i.ibb.co/WFjZZVS/html-slider-2.jpg" width="100%" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block" src="https://i.ibb.co/cCwb0mg/html-slider-3.jpg" width="100%" alt="Third slide">
    </div>
  </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#Indicators" 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="#Indicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Output:-

Carousel With Captions

Add captions to your slides simply with the .carousel-caption component among any .carousel-item. they will be simply hidden on smaller viewports, as shown below, with ex gratia show utilities. we tend to hide them at first with .d-none and convey them back on medium-sized devices with .d-md-block.

<div id="captions" class="carousel slide" data-bs-ride="carousel">
 	  <div class="carousel-indicators">
    <button type="button" data-bs-target="#captions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#captions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#captions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block" src="https://i.ibb.co/RpmmZ7s/html-slider-1.jpg" width="100%" alt="First slide">
       <div class="carousel-caption d-none d-md-block">
        <h5>First slider label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block" src="https://i.ibb.co/WFjZZVS/html-slider-2.jpg" width="100%" alt="Second slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slider label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block" src="https://i.ibb.co/cCwb0mg/html-slider-3.jpg" width="100%" alt="Third slide">
     	<div class="carousel-caption d-none d-md-block">
        <h5>Third slider label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
      </div>
    </div>
  </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#captions" 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="#captions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Output:-

Crossfade Slider Animation

Add .carousel-fade to your carousel to animate slides with a fade transition rather than a slide.

<div id="demo" class="carousel slide carousel-fade" data-bs-ride="carousel">
 	  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block" src="https://i.ibb.co/RpmmZ7s/html-slider-1.jpg" width="100%" alt="First slide">
       <div class="carousel-caption d-none d-md-block">
        <h5>First slider label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block" src="https://i.ibb.co/WFjZZVS/html-slider-2.jpg" width="100%" alt="Second slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slider label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block" src="https://i.ibb.co/cCwb0mg/html-slider-3.jpg" width="100%" alt="Third slide">
     	<div class="carousel-caption d-none d-md-block">
        <h5>Third slider label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
      </div>
    </div>
  </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#demo" 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="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>