Bootstrap 4 - Carousel

Description

Carousel is a flexible, responsive way to add a slider to your site. To create a carousel,

  • Add the .carousel and .slide classes to the container along with an id.

  • Specify the slides in a <div> with class .carousel-inner and each slide defined with .carousel-item class.

  • Add the .active class to one of the slides to make carousel visible; otherwise the carousel will not be visible.

Basic Carousel

A simple slideshow below shows basic carousel with indicators and controls −

Example

Live Demo 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Basic Carousel</h2>
         <div id = "carouselwithIndicators" class = "carousel slide w-50" data-ride = "carousel">
            <ol class = "carousel-indicators">
               <li data-target = "#carouselExampleIndicators" data-slide-to = "0" class = "active"></li>
               <li data-target = "#carouselExampleIndicators" data-slide-to = "1"></li>
               <li data-target = "#carouselExampleIndicators" data-slide-to = "2s"></li>
            </ol>
            
            <div class =" carousel-inner">
               <div class = "carousel-item active">
                  <img class = "d-block w-100" 
                     src = "https://www.tutorialspoint.com/bootstrap/images/slide1.png" 
                     alt = "First slide">
               </div>
               
               <div class = "carousel-item">
                  <img class = "d-block w-100" 
                     src = "https://www.tutorialspoint.com/bootstrap/images/slide2.png" 
                     alt = "Second slide">
               </div>
               <div class = "carousel-item">
                  <img class = "d-block w-100" 
                     src = "https://www.tutorialspoint.com/bootstrap/images/slide3.png" 
                     alt = "Third slide">
               </div>
            </div>
            
            <a class = "carousel-control-prev" href = "#carouselwithIndicators" role = "button" data-slide = "prev">
               <span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
               <span class = "sr-only">Previous</span>
            </a>
            
            <a class = "carousel-control-next" href = "#carouselwithIndicators" role = "button" data-slide = "next">
               <span class = "carousel-control-next-icon" aria-hidden = "true"></span>
               <span class = "sr-only">Next</span>
            </a>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

Note − In the example, we have used w-50 to the carousel and w-100 to the images, which provides width of 50% and a left and right margin of auto and 100% width for the carousel images.

Captions to Slides

Add the captions to the slideshow by using .carousel-caption class within the .carousel-item class.

The following example demonstrates adding captions to the slideshow −

Example

Live Demo 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Carousel with Caption</h2>
         <div id = "carouselwithIndicators" class = "carousel slide w-50" data-ride = "carousel">
            <ol class = "carousel-indicators">
               <li data-target = "#carouselExampleIndicators" data-slide-to = "0" class = "active"></li>
               <li data-target = "#carouselExampleIndicators" data-slide-to = "1"></li>
               <li data-target = "#carouselExampleIndicators" data-slide-to = "2"></li>
            </ol>
            
            <div class = "carousel-inner">
               <div class = "carousel-item active">
                  <img class = "d-block w-100" 
                     src = "https://www.tutorialspoint.com/bootstrap/images/slide1.png" 
                     alt = "First slide">
                  <div class = "carousel-caption d-none d-md-block">
                     <h5>HTML</h5>
                     <p>Hypertext Markup Language</p>
                  </div>
               </div>
               
               <div class = "carousel-item">
                  <img class = "d-block w-100" 
                     src = "https://www.tutorialspoint.com/bootstrap/images/slide2.png" 
                     alt = "Second slide">
                  <div class = "carousel-caption d-none d-md-block">
                     <h5>CSS</h5>
                     <p>Cascading Style Sheets</p>
                  </div>
               </div>
               
               <div class = "carousel-item">
                  <img class = "d-block w-100" 
                  src = "https://www.tutorialspoint.com/bootstrap/images/slide3.png" 
                  alt = "Third slide">
                  <div class = "carousel-caption d-none d-md-block">
                     <h5>PHP</h5>
                     <p>Hypertext Preprocessor</p>
                  </div>
               </div>
               
            </div>
            
            <a class = "carousel-control-prev" href = "#carouselwithIndicators" role = "button" data-slide = "prev">
               <span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
               <span class = "sr-only">Previous</span>
            </a>
            
            <a class = "carousel-control-next" href = "#carouselwithIndicators" role =" button" data-slide = "next">
               <span class = "carousel-control-next-icon" aria-hidden = "true"></span>
               <span class = "sr-only">Next</span>
            </a>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

Crossfade

You can add fade transition effect to animate the slides of carousel by using the .carousel-fade class as shown in the below example −

Example

Live Demo 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Carousel with Crossfade</h2>
         <div id = "carouselExampleFade" class = "carousel carousel-fade w-50" data-ride = "carousel">
            <div class = "carousel-inner">
               <div class = "carousel-item active">
                  <img class = "d-block w-100" 
                     src = "https://www.tutorialspoint.com/bootstrap/images/slide1.png" 
                     alt = "First slide">
               </div>
               
               <div class = "carousel-item">
                  <img class = "d-block w-100" 
                     src = "https://www.tutorialspoint.com/bootstrap/images/slide2.png"
                     alt = "Second slide">
               </div>
               
               <div class = "carousel-item">
                  <img class = "d-block w-100" 
                     src = "https://www.tutorialspoint.com/bootstrap/images/slide3.png" 
                     alt = "Third slide">
               </div>
            </div>
            
            <a class = "carousel-control-prev" href = "#carouselExampleFade" role = "button" data-slide = "prev">
               <span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
               <span class = "sr-only">Previous</span>
            </a>
            
            <a class = "carousel-control-next" href = "#carouselExampleFade" role = "button" data-slide = "next">
               <span class = "carousel-control-next-icon" aria-hidden = "true"></span>
               <span class = "sr-only">Next</span>
            </a>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

bootstrap4_components.htm
Advertisements