Slideshow

Bootstrap 5 Slideshow component

Responsive Slideshow built with Bootstrap 5. Examples of adding controls, slideshow buttons: square and rounded, dark variant, automatic slide and more.

Basic example

Here’s a slideshow with slides only. Note the presence of the .d-block and .w-100 on carousel images to prevent browser default image alignment.

Show code Edit in sandbox

HTML

<div id="carouselExampleSlidesOnly" data-mdb-carousel-init class="carousel slide" data-mdb-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100"
        alt="Wild Landscape" />
    </div>
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera" />
    </div>
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100"
        alt="Exotic Fruits" />
    </div>
  </div>
</div>

Adding Controls

You can add the previous and next controls:

Show code Edit in sandbox

HTML

<div id="carouselExampleControls" data-mdb-carousel-init class="carousel slide" data-mdb-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100"
        alt="Wild Landscape" />
    </div>
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera" />
    </div>
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100"
        alt="Exotic Fruits" />
    </div>
  </div>
  <button data-mdb-button-init class="carousel-control-prev" type="button" data-mdb-target="#carouselExampleControls"
    data-mdb-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button data-mdb-button-init class="carousel-control-next" type="button" data-mdb-target="#carouselExampleControls"
    data-mdb-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Slideshow buttons

You can also add buttons to the slideshow, alongside the controls, too.

Show code Edit in sandbox

HTML

<div id="carouselExampleIndicators" data-mdb-carousel-init class="carousel slide" data-mdb-ride="carousel">
  <div class="carousel-indicators">
    <button  type="button" data-mdb-button-init data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="0"
      class="active" aria-current="true" aria-label="Slide 1"></button>
    <button  type="button" data-mdb-button-init data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="1"
      aria-label="Slide 2"></button>
    <button  type="button" data-mdb-button-init data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="2"
      aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100"
        alt="Wild Landscape" />
    </div>
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera" />
    </div>
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100"
        alt="Exotic Fruits" />
    </div>
  </div>
  <button data-mdb-button-init class="carousel-control-prev" type="button" data-mdb-target="#carouselExampleIndicators"
    data-mdb-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button data-mdb-button-init class="carousel-control-next" type="button" data-mdb-target="#carouselExampleIndicators"
    data-mdb-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Square buttons

To change the shape of buttons, you have to add width and height to these elements. Also check the documentation about square buttons.

Show code Edit in sandbox

HTML
CSS

<div id="carouselExampleIndicators" data-mdb-carousel-init class="carousel slide" data-mdb-ride="carousel">
  <div class="carousel-indicators">
    <button  type="button" data-mdb-button-init data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="0"
      class="active" aria-current="true" aria-label="Slide 1"></button>
    <button  type="button" data-mdb-button-init data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="1"
      aria-label="Slide 2"></button>
    <button  type="button" data-mdb-button-init data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="2"
      aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100"
        alt="Wild Landscape" />
    </div>
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera" />
    </div>
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100"
        alt="Exotic Fruits" />
    </div>
  </div>
  <button data-mdb-button-init class="carousel-control-prev" type="button" data-mdb-target="#carouselExampleIndicators"
    data-mdb-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button data-mdb-button-init class="carousel-control-next" type="button" data-mdb-target="#carouselExampleIndicators"
    data-mdb-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

#square-buttons {
width: 10px;
height: 10px
}

Rounded buttons

To change the shape of buttons to rounded, you have to also add border-radius to these elements. You'll find more information about border-radius here.

Show code Edit in sandbox

HTML
CSS

<div id="carouselExampleIndicators" data-mdb-carousel-init class="carousel slide" data-mdb-ride="carousel">
  <div class="carousel-indicators">
    <button  type="button" data-mdb-button-init data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="0"
      class="active" aria-current="true" aria-label="Slide 1"></button>
    <button  type="button" data-mdb-button-init data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="1"
      aria-label="Slide 2"></button>
    <button  type="button" data-mdb-button-init data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="2"
      aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100"
        alt="Wild Landscape" />
    </div>
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera" />
    </div>
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100"
        alt="Exotic Fruits" />
    </div>
  </div>
  <button data-mdb-button-init class="carousel-control-prev" type="button" data-mdb-target="#carouselExampleIndicators"
    data-mdb-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button data-mdb-button-init class="carousel-control-next" type="button" data-mdb-target="#carouselExampleIndicators"
    data-mdb-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

#square-buttons {
width: 10px;
height: 10px;
border-radius: 100%
}

With text

Add captions to your slides easily with the .carousel-caption element within any .carousel-item. They can be easily hidden on smaller viewports, as shown below, with optional display utilities. We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block.

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Show code Edit in sandbox

HTML

<div id="carouselExampleCaptions" data-mdb-carousel-init class="carousel slide" data-mdb-ride="carousel">
  <div class="carousel-indicators">
    <button  type="button" data-mdb-button-init data-mdb-target="#carouselExampleCaptions" data-mdb-slide-to="0"
      class="active" aria-current="true" aria-label="Slide 1"></button>
    <button  type="button" data-mdb-button-init data-mdb-target="#carouselExampleCaptions" data-mdb-slide-to="1"
      aria-label="Slide 2"></button>
    <button  type="button" data-mdb-button-init data-mdb-target="#carouselExampleCaptions" data-mdb-slide-to="2"
      aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100"
        alt="Wild Landscape" />
      <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">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera" />
      <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="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100"
        alt="Exotic Fruits" />
      <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>
  <button data-mdb-button-init class="carousel-control-prev" type="button" data-mdb-target="#carouselExampleCaptions"
    data-mdb-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button data-mdb-button-init class="carousel-control-next" type="button" data-mdb-target="#carouselExampleCaptions"
    data-mdb-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Dark variant

Add .carousel-dark to the .carousel for darker controls, indicators, and captions. You'll find more information about dark mode here.

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Show code Edit in sandbox

HTML
CSS

<!-- Carousel wrapper -->
<div id="carouselDarkVariant" data-mdb-carousel-init class="carousel slide carousel-fade carousel-dark"
  data-mdb-ride="carousel">
  <!-- Indicators -->
  <div class="carousel-indicators">
    <button data-mdb-button-init data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="0" class="active"
      aria-current="true" aria-label="Slide 1"></button>
    <button data-mdb-button-init data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="1" aria-label="Slide 1"></button>
    <button data-mdb-button-init data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="2" aria-label="Slide 1"></button>
  </div>

  <!-- Inner -->
  <div class="carousel-inner">
    <!-- Single item -->
    <div class="carousel-item active">
      <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(19).webp" class="d-block w-100"
        alt="Motorbike Smoke" />
      <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>

    <!-- Single item -->
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(35).webp" class="d-block w-100"
        alt="Mountaintop" />
      <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>

    <!-- Single item -->
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(40).webp" class="d-block w-100"
        alt="Woman Reading a Book" />
      <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>
  <!-- Inner -->

  <!-- Controls -->
  <button data-mdb-button-init class="carousel-control-prev" type="button" data-mdb-target="#carouselDarkVariant"
    data-mdb-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button data-mdb-button-init class="carousel-control-next" type="button" data-mdb-target="#carouselDarkVariant"
    data-mdb-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
<!-- Carousel wrapper -->

Automatic slide

You can change the length of delay between items by setting data-mdb-interval="". Add this option to the class .carousel-item.

Show code Edit in sandbox

HTML

<div id="carouselExampleInterval" data-mdb-carousel-init class="carousel slide" data-mdb-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-mdb-interval="1000">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100"
        alt="Wild Landscape" />
    </div>
    <div class="carousel-item" data-mdb-interval="3000">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera" />
    </div>
    <div class="carousel-item" data-mdb-interval="5000">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100"
        alt="Exotic Fruits" />
    </div>
  </div>
  <button data-mdb-button-init class="carousel-control-prev" data-mdb-target="#carouselExampleInterval" type="button"
    data-mdb-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button data-mdb-button-init class="carousel-control-next" data-mdb-target="#carouselExampleInterval" type="button"
    data-mdb-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Manual slide

If you don't want an automatic slide, you have to set data-mdb-interval="false".

Show code Edit in sandbox

HTML

<div id="carouselExampleInterval2" data-mdb-carousel-init class="carousel slide" data-mdb-ride="carousel"
  data-mdb-interval="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100"
        alt="Wild Landscape" />
    </div>
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera" />
    </div>
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100"
        alt="Exotic Fruits" />
    </div>
  </div>
  <button data-mdb-button-init class="carousel-control-prev" data-mdb-target="#carouselExampleInterval2" type="button"
    data-mdb-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button data-mdb-button-init class="carousel-control-next" data-mdb-target="#carouselExampleInterval2" type="button"
    data-mdb-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Without loop

To stop cycling at the end of a slideshow, you have to add data-mdb-wrap="false" to the main div.

Show code Edit in sandbox

HTML

<div id="carouselExampleInterval5" data-mdb-carousel-init class="carousel slide" data-mdb-ride="carousel"
  data-mdb-wrap="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100"
        alt="Wild Landscape">
    </div>
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera">
    </div>
    <div class="carousel-item" data-mdb-wrap="false">
      <img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100"
        alt="Exotic Fruits">
    </div>
  </div>
  <button data-mdb-button-init class="carousel-control-prev" data-mdb-target="#carouselExampleInterval5" type="button"
    data-mdb-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button data-mdb-button-init class="carousel-control-next" data-mdb-target="#carouselExampleInterval5" type="button"
    data-mdb-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Product Cards

Here’s an example slideshow with product cards which have star ratings.

Today's Combo Offer

Laptops

~~$1099~~

HP Notebook

$999

Available: 6

Today's Combo Offer

Laptops

~~$1199~~

HP Envy

$1099

Available: 7

Today's Combo Offer

Laptops

~~$1399~~

Toshiba B77

$1299

Available: 5

Show code Edit in sandbox

HTML

<div id="carouselExampleInterval4" data-mdb-carousel-init class="carousel slide" data-mdb-ride="carousel">
  <div class="carousel-inner mx-auto w-50 rounded shadow-4">
    <div class="carousel-item active">
      <div class="card shadow-4 d-block">
        <div class="d-flex justify-content-between p-3">
          <p class="lead mb-0">Today's Combo Offer</p>
          <div
            class="bg-info rounded-circle d-flex align-items-center justify-content-center shadow-1-strong"
            style="width: 35px; height: 35px;">
            <p class="text-white mb-0 small">x4</p>
          </div>
        </div>
        <img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/4.webp"
          class="card-img-top" alt="Laptop" />
        <div class="card-body">
          <div class="d-flex justify-content-between">
            <p class="small"><a href="#!" class="text-muted">Laptops</a></p>
            <p class="small text-danger"><s>$1099</s></p>
          </div>

          <div class="d-flex justify-content-between mb-3">
            <h5 class="mb-0">HP Notebook</h5>
            <h5 class="text-body mb-0">$999</h5>
          </div>

          <div class="d-flex justify-content-between mb-2">
            <p class="text-muted mb-0">Available: <span class="fw-bold">6</span></p>
            <div class="ms-auto text-warning">
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item">
      <div class="card shadow-4 d-block">
        <div class="d-flex justify-content-between p-3">
          <p class="lead mb-0">Today's Combo Offer</p>
          <div
            class="bg-info rounded-circle d-flex align-items-center justify-content-center shadow-1-strong"
            style="width: 35px; height: 35px;">
            <p class="text-white mb-0 small">x2</p>
          </div>
        </div>
        <img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/7.webp"
          class="card-img-top" alt="Laptop" />
        <div class="card-body">
          <div class="d-flex justify-content-between">
            <p class="small"><a href="#!" class="text-muted">Laptops</a></p>
            <p class="small text-danger"><s>$1199</s></p>
          </div>

          <div class="d-flex justify-content-between mb-3">
            <h5 class="mb-0">HP Envy</h5>
            <h5 class="text-body mb-0">$1099</h5>
          </div>

          <div class="d-flex justify-content-between mb-2">
            <p class="text-muted mb-0">Available: <span class="fw-bold">7</span></p>
            <div class="ms-auto text-warning">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="far fa-star"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item">
      <div class="card">
        <div class="d-flex justify-content-between p-3">
          <p class="lead mb-0">Today's Combo Offer</p>
          <div
            class="bg-info rounded-circle d-flex align-items-center justify-content-center shadow-1-strong"
            style="width: 35px; height: 35px;">
            <p class="text-white mb-0 small">x3</p>
          </div>
        </div>
        <img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/5.webp"
          class="card-img-top" alt="Gaming Laptop" />
        <div class="card-body">
          <div class="d-flex justify-content-between">
            <p class="small"><a href="#!" class="text-muted">Laptops</a></p>
            <p class="small text-danger"><s>$1399</s></p>
          </div>

          <div class="d-flex justify-content-between mb-3">
            <h5 class="mb-0">Toshiba B77</h5>
            <h5 class="text-body mb-0">$1299</h5>
          </div>

          <div class="d-flex justify-content-between mb-2">
            <p class="text-muted mb-0">Available: <span class="fw-bold">5</span></p>
            <div class="ms-auto text-warning">
              <i class="fa fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star-half-alt"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <button data-mdb-button-init class="carousel-control-prev" type="button" data-mdb-target="#carouselExampleInterval4"
    data-mdb-slide="prev">
    <i class="fas fa-chevron-circle-left fa-2x rounded-circle shadow-3" style="color:#616161"></i>
    <span class="visually-hidden">Previous</span>
  </button>
  <button data-mdb-button-init class="carousel-control-next" type="button" data-mdb-target="#carouselExampleInterval4"
    data-mdb-slide="next">
    <i class="fas fa-chevron-circle-right fa-2x rounded-circle shadow-3" style="color:#616161"></i>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Full page

An example of full-page usage of the slideshow with text overlay.

Click on the image to see a live demo.

Slideshow

Bootstrap 5 Slideshow component

Basic example

Adding Controls

Slideshow buttons

Square buttons

Rounded buttons

With text

First slide label

Second slide label

Third slide label

Dark variant

First slide label

Second slide label

Third slide label

Automatic slide

Manual slide

Without loop

Product Cards

HP Notebook

$999

HP Envy

$1099

Toshiba B77

$1299

Full page

Related resources