Bootstrap

Bootstrap 4 Carousel Tutorial With Example

14 — 17 min read
+1
Share
Tweet
Share
Pin
0 Shares

In Bootstrap 4 Carousel Tutorial With Example, you will learn how to create the Bootstrap carousel component. The Bootstrap carousel component allows you to add scrolling text and images that slide in,  pause, then slide out. Controls enable the user to scroll forward or backward within the set. There are some of the changes in Bootstrap 4.

Bootstrap 4 Carousel Tutorial With Example

Carousel is a JavaScript component in Bootstrap that allows you to add a slider to your site. The carousel is a slideshow, that is used to display an element from a set of other elements.

#1: Bootstrap 4 Carousel

The Carousel is a slideshow for cycling through elements. Bootstrap 4 carousels are very frequently used to display important data in easily readable portions, which you can cycle through.

Creating a carousel you need to create three groups of elements.

  • Slideshow
  • Indicators
  • Left/Right Controls

#2: Bootstrap 4 Carousel Slideshow

The slideshows are what creates the carousel. The slideshow must be wrapped in the <div> container with the class .carousel-inner. Within, you can create the slides.

A slide is created using the <div> container with the class .carousel-item and adding .active to a one that is currently supposed to be displayed.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Carousel Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Carousel Slideshow</h2>
 <div id="demo" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img src="/images/federer.jpg" alt="Federer">
    </div>
    <div class="carousel-item">
      <img src="/images/nadal.jpg" alt="Nadal">
    </div>  
    <div class="carousel-item">
      <img src="/images/djokovic.jpg" alt="Djokovic">
    </div>
  </div>
  </div>
</div>
</body>
</html>

The example of a Bootstrap carousel slideshow will look like below screenshot.

Bootstrap 4 Carousel Example

#3: Bootstrap 4 Carousel Indicators

The indicator is used for making navigating through the carousel easier. Every indicator represents a slide of the carousel. When it is highlighted, it means you are on the slide it represents.

First, the <ul> element needs to have the class .carousel-inner.

Next, the indicators themselves are <li> elements with a data-target attribute value set to the id of the container of a whole carousel.

They also require to have the data-slide-to attribute with a numeric value representing their position in the index of slides, starting with 0.

The class .active, indicating that represents the slide that is currently being displayed.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Carousel Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Carousel Indicators</h2>
 <div id="demo" class="carousel slide" data-ride="carousel">
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img src="/images/federer.jpg" alt="Federer" width="800" height="500">
    </div>
    <div class="carousel-item">
      <img src="/images/nadal.jpg" alt="Nadal" width="800" height="500">
    </div>  
    <div class="carousel-item">
      <img src="/images/djokovic.jpg" alt="Djokovic" width="800" height="500">
    </div>
  </div>
  </div>
</div>
</body>
</html>

The example of Bootstrap carousel indicators will look like below screenshot.

Bootstrap 4 Carousel Template

#4: Bootstrap 4 Carousel Left/Right Controls

First, you simply create two <a> elements. Both of them want to have the href attribute set to the id of the carousel itself. The first link is going to be assigned a class .carousel-control-prev and have the data-slide attribute with a value prev. The second link is going to be assigned a class .carousel-control-next and have the data-slide attribute with a value next. You can also assign the icons using <span> elements with a class.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Carousel Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Carousel Left/Right Controls</h2>
 <div id="demo" class="carousel slide" data-ride="carousel">
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img src="/images/federer.jpg" alt="Federer" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="/images/nadal.jpg" alt="Nadal" width="1100" height="500">
    </div>  
    <div class="carousel-item">
      <img src="/images/djokovic.jpg" alt="Djokovic" width="1100" height="500">
    </div>
  </div>
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>
  </div>
</div>
</body>
</html>

The example of Bootstrap carousel left/right controls will look like below screenshot.

Bootstrap 4 Carousel Left-Right Controls Example

#5: Bootstrap 4 Carousel Add Caption To Slide

You can add elements <div class=”carousel-caption”> within each <div class=”carousel-item”> to create a caption for each slide.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Carousel Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Carousel Add Caption</h2>
 <div id="demo" class="carousel slide" data-ride="carousel">
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img src="/images/federer.jpg" alt="Federer" width="1100" height="500">
      <div class="carousel-caption">
        <h3>Federer</h3>
      </div>
    </div>
    <div class="carousel-item">
      <img src="/images/nadal.jpg" alt="Nadal" width="1100" height="500">
      <div class="carousel-caption">
        <h3>Nadal</h3>
      </div>
    </div>  
    <div class="carousel-item">
      <img src="/images/djokovic.jpg" alt="Djokovic" width="1100" height="500">
      <div class="carousel-caption">
        <h3>Djokovic</h3>
      </div>
    </div>
  </div>
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>
  </div>
</div>
</body>
</html>

The example of the Bootstrap carousel caption will look like below screenshot.

Bootstrap 4 Carousel Caption Example

At last, our Bootstrap 4 Carousel Tutorial With Example is over.

Related Posts

Post Your Thoughts

This site uses Akismet to reduce spam. Learn how your comment data is processed.