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.

        
            
                <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:

        
            
                <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.

        
            
                <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.

        
            
                <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.

        
            
                <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.

        
            
                <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.

        
            
                <!-- 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.

        
            
                <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".

        
            
                <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.

        
            
                <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.

        
            
                <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.

Full page slideshow