Post
Ask Question

How To Create Carousel Slider In Bootstrap 4

Introduction

This article demonstrates how you can create a Bootstrap 4 carousel slider in your project. The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators. Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.

Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit.

Be sure to set a unique id on the .carousel for optional controls, especially if you’re using multiple carousels on a single page.

To use Bootstrap 4 alert in your project, you need have the following downloaded or cdn link scripts.

  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  3. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  

To control carousel slider enable script

  1. <script type="text/javascript">  
  2.         $(document).ready(function () {  
  3.             // Activate Carousel with a specified interval speed  
  4.             $("#myCarousel").carousel({ interval: 8000 });  
  5.   
  6.             // Enable Carousel Indicators  
  7.             $(".item1").click(function () {  
  8.                 $("#myCarousel").carousel(0);  
  9.             });  
  10.             $(".item2").click(function () {  
  11.                 $("#myCarousel").carousel(1);  
  12.             });  
  13.             $(".item3").click(function () {  
  14.                 $("#myCarousel").carousel(2);  
  15.             });  
  16.   
  17.             // Enable Carousel Controls  
  18.             $(".carousel-control-prev").click(function () {  
  19.                 $("#myCarousel").carousel("prev");  
  20.             });  
  21.             $(".carousel-control-next").click(function () {  
  22.                 $("#myCarousel").carousel("next");  
  23.             });  
  24.         });  
  25. </script>  

Carousel CSS Classes

.carouselCreates a carousel
.carousel-indicatorsAdds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing)
.carousel-innerAdds slides to the carousel
.carousel-itemSpecifies the content of each slide
.carousel-control-prevAdds a left (previous) button to the carousel, which allows the user to go back between the slides
.carousel-control-nextAdds a right (next) button to the carousel, which allows the user to go forward between the slides
.carousel-control-prev-iconUsed together with .carousel-control-prev to create a "previous" button
.carousel-control-next-iconUsed together with .carousel-control-next to create a "next" button
.carousel-captionSpecifies a caption for the carousel
.slideAdds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect

Data-* Attributes

  • The data-ride="carousel" attribute activates the carousel.
  • The data-slide and data-slide-to attributes specify which slide to go to.
  • The data-slide attribute accepts two values: prev or next, while data-slide-to accepts numbers.

Example slides only

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>CarouselSlider</title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9.     <style type="text/css">  
  10.       .carousel-inner img {  
  11.       width: 100%;  
  12.       height:350px;  
  13.   }  
  14.     </style>  
  15. </head>  
  16. <body>  
  17.     <div class="container py-5">  
  18.         <h4 class="text-center text-uppercase">Carousel Slides only</h4>  
  19.         <div id="CarouselSlideOnly" class="carousel slide" data-ride="carousel">  
  20.             <div class="carousel-inner">  
  21.                 <div class="carousel-item active">  
  22.                     <img src="Slider/Slide-1.jpg" alt="Slider-1"  />  
  23.                 </div>  
  24.                 <div class="carousel-item">  
  25.                     <img src="Slider/Slide-2.jpg" alt="Slider-2" />  
  26.                 </div>  
  27.                 <div class="carousel-item">  
  28.                     <img src="Slider/Slide-3.jpg" alt="Slider-3" />  
  29.                 </div>  
  30.                 <div class="carousel-item">  
  31.                     <img src="Slider/Slide-4.jpg" alt="Slider-4" />  
  32.                 </div>  
  33.                 <div class="carousel-item">  
  34.                     <img src="Slider/Slide-5.jpg" alt="Slider-5" />  
  35.                 </div>  
  36.             </div>  
  37.         </div>  
  38.     </div>  
  39. </body>  
  40. </html>  

Output

Carousel Slider In Bootstrap Output 

Example Carousel Slides with Controls

Adding in the previous and next controls.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>CarouselSlider</title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9.     <style type="text/css">  
  10.       .carousel-inner img {  
  11.       width: 100%;  
  12.       height:350px;  
  13.   }  
  14.     </style>  
  15. </head>  
  16. <body>  
  17.     <div class="container py-5">  
  18.         <h4 class="text-center text-uppercase">Carousel Slides with Controls</h4>  
  19.         <div id="CarouselSlideWithControls" class="carousel slide" data-ride="carousel">  
  20.             <div class="carousel-inner">  
  21.                 <div class="carousel-item active">  
  22.                     <img src="Slider/Slide-1.jpg" alt="Slider-1"  />  
  23.                 </div>  
  24.                 <div class="carousel-item">  
  25.                     <img src="Slider/Slide-2.jpg" alt="Slider-2" />  
  26.                 </div>  
  27.                 <div class="carousel-item">  
  28.                     <img src="Slider/Slide-3.jpg" alt="Slider-3" />  
  29.                 </div>  
  30.                 <div class="carousel-item">  
  31.                     <img src="Slider/Slide-4.jpg" alt="Slider-4" />  
  32.                 </div>  
  33.                 <div class="carousel-item">  
  34.                     <img src="Slider/Slide-5.jpg" alt="Slider-5" />  
  35.                 </div>  
  36.             </div>  
  37.             <a class="carousel-control-prev" href="#CarouselSlideWithControls" role="button" data-slide="prev">  
  38.                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>  
  39.                 <span class="sr-only">Previous</span>  
  40.             </a>  
  41.             <a class="carousel-control-next" href="#CarouselSlideWithControls" role="button" data-slide="next">  
  42.                 <span class="carousel-control-next-icon" aria-hidden="true"></span>  
  43.                 <span class="sr-only">Next</span>  
  44.             </a>  
  45.         </div>  
  46.     </div>  
  47. </body>  
  48. </html>  

Output

Carousel Slider In Bootstrap Output 

Example Carousel Slides With indicators

You can also add the indicators to the carousel, alongside the controls, too.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>CarouselSlider</title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9.     <style type="text/css">  
  10.       .carousel-inner img {  
  11.       width: 100%;  
  12.       height:350px;  
  13.   }  
  14.     </style>  
  15. </head>  
  16. <body>  
  17.     <div class="container py-5">  
  18.         <h4 class="text-center text-uppercase">Carousel Slides With indicators</h4>  
  19.         <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">  
  20.             <ol class="carousel-indicators">  
  21.                 <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>  
  22.                 <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>  
  23.                 <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>  
  24.                 <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>  
  25.                 <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>  
  26.             </ol>  
  27.             <div class="carousel-inner">  
  28.                 <div class="carousel-item active">  
  29.                     <img src="Slider/Slide-1.jpg" alt="Slider-1"  />  
  30.                 </div>  
  31.                 <div class="carousel-item">  
  32.                     <img src="Slider/Slide-2.jpg" alt="Slider-2" />  
  33.                 </div>  
  34.                 <div class="carousel-item">  
  35.                     <img src="Slider/Slide-3.jpg" alt="Slider-3" />  
  36.                 </div>  
  37.                 <div class="carousel-item">  
  38.                     <img src="Slider/Slide-4.jpg" alt="Slider-4" />  
  39.                 </div>  
  40.                 <div class="carousel-item">  
  41.                     <img src="Slider/Slide-5.jpg" alt="Slider-5" />  
  42.                 </div>  
  43.             </div>  
  44.             <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">  
  45.                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>  
  46.                 <span class="sr-only">Previous</span>  
  47.             </a>  
  48.             <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">  
  49.                 <span class="carousel-control-next-icon" aria-hidden="true"></span>  
  50.                 <span class="sr-only">Next</span>  
  51.             </a>  
  52.         </div>  
  53.     </div>  
  54. </body>  
  55. </html>  

Output

 Carousel Slider In Bootstrap Output

Example Carousel Slides With Captions

Add captions to your slides easily with the .carousel-caption element within any .carousel-item.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>CarouselSlider</title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9.     <style type="text/css">  
  10.         .carousel-inner img {  
  11.             width: 100%;  
  12.             height: 350px;  
  13.         }  
  14.     </style>  
  15. </head>  
  16. <body>  
  17.     <div class="container py-5">  
  18.         <h4 class="text-center text-uppercase">Carousel Slides With indicators</h4>  
  19.         <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">  
  20.             <ol class="carousel-indicators">  
  21.                 <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>  
  22.                 <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>  
  23.                 <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>  
  24.                 <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>  
  25.                 <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>  
  26.             </ol>  
  27.             <div class="carousel-inner">  
  28.                 <div class="carousel-item active">  
  29.                     <img src="Slider/Slide-1.jpg" alt="Slider-1" />  
  30.                     <div class="carousel-caption">  
  31.                         <h5>Slider-1</h5>  
  32.                         <p>This is slider-1</p>  
  33.                     </div>  
  34.                 </div>  
  35.                 <div class="carousel-item">  
  36.                     <img src="Slider/Slide-2.jpg" alt="Slider-2" />  
  37.                     <div class="carousel-caption">  
  38.                         <h5>Slider-2</h5>  
  39.                         <p>This is slider-2</p>  
  40.                     </div>  
  41.                 </div>  
  42.                 <div class="carousel-item">  
  43.                     <img src="Slider/Slide-3.jpg" alt="Slider-3" />  
  44.                     <div class="carousel-caption">  
  45.                         <h5>Slider-3</h5>  
  46.                         <p>This is slider-3</p>  
  47.                     </div>  
  48.                 </div>  
  49.                 <div class="carousel-item">  
  50.                     <img src="Slider/Slide-4.jpg" alt="Slider-4" />  
  51.                     <div class="carousel-caption">  
  52.                         <h5>Slider-4</h5>  
  53.                         <p>This is slider-4</p>  
  54.                     </div>  
  55.                 </div>  
  56.                 <div class="carousel-item">  
  57.                     <img src="Slider/Slide-5.jpg" alt="Slider-5" />  
  58.                     <div class="carousel-caption">  
  59.                         <h5>Slider-5</h5>  
  60.                         <p>This is slider-5</p>  
  61.                     </div>  
  62.                 </div>  
  63.             </div>  
  64.             <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">  
  65.                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>  
  66.                 <span class="sr-only">Previous</span>  
  67.             </a>  
  68.             <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">  
  69.                 <span class="carousel-control-next-icon" aria-hidden="true"></span>  
  70.                 <span class="sr-only">Next</span>  
  71.             </a>  
  72.         </div>  
  73.     </div>  
  74. </body>  
  75. </html>  

Output

Carousel Slider In Bootstrap Output


Similar Articles