Logo

Bootstrap 4 Carousel

Bootstrap 4 Carousel

Bootstrap 4 offers a carousel component, which is also known as a slider or slideshow. The carousel is used for the dynamic representation of content using images with some text. It is used to represent a large amount of content by occupying less amount of space

Steps for creating a Carousel

  • Add .carousel class along with the .slide class to the <div> element to create a carousel layout. The .slide class adds the CSS animation and transition effect
  • Add .carousel-indicators class to the <div> element to add indicators to the carousel.
  • Add .carousel-inner class to the <div> element to add slides to the carousel.
  • Add .carousel-item class to the <div> element for specifying content of each element.
  • Add .carousel-control-prev class to the <a> element for adding previous button to the carousel.
  • Add .carousel-control-next class to the <a> element for adding next button to the carousel.
  • Add .carousel-control-prev-icon class to the <span> element which is used with .carousel-control-prev class to add the previous button icon.
  • Add .carousel-control-next-icon class to the <span> element which is used with .carousel-control-prev class to add the next button icon.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Carousel 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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
    width: 100%;
    height: 400px;
  }
  </style>
</head>
<body>
  <h2 style="text-align: center">Bootstrap 4 Carousel</h2><br>
  <div id="demo" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="footer.jpg" alt="Slider1" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="slider1.png" alt="Slider2" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="onepage.jpg" alt="Slider3" width="1100" height="500">
    </div>
  </div>
  <!-- Left and right controls -->
  <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>
</body>
</html>

Output

Bootstrap 4 Carousel

Add Captions to the Slides – Bootstrap 4 also allows you to add the text or caption to your slide.

Steps for creating Captions with the Slide

Add .carousel-caption class to the <div> element to add the caption to each slide. This class is used within the .carousel-class-item class.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Carousel 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.4.1/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
    width: 100%;
    height: 400px;
  }
  </style>
</head>
<body>
  <h2 style="text-align: center">Bootstrap 4 Carousel with Caption</h2><br>
  <div id="demo" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="footer.jpg" alt="Slider1" width="1100" height="500">
      <div class="carousel-caption">
        <h3>Hey there!</h3>
        <p>This is the first slide</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="slider1.png" alt="Slider2" width="1100" height="500">
      <div class="carousel-caption">
        <h3>Hey there!</h3>
        <p>This is the second slide</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="onepage.jpg" alt="Slider3" width="1100" height="500">
      <div class="carousel-caption">
        <h3>Hey there!</h3>
        <p>This is the third slide</p>
      </div>
    </div>
  </div>
  <!-- Left and right controls -->
  <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>
</body>
</html>

Output

Carousel using JavaScript – You can activate the carousel manually using JavaScript.   

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Carousel 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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
    width: 100%;
    height: 400px;
  }
  </style>
</head>
<body>
<div class="container mt-3">
<h2>Activate Carousel with JavaScript</h2>
<div id="myCarousel" class="carousel slide">
  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li class="item1 active"></li>
    <li class="item2"></li>
    <li class="item3"></li>
  </ul>
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slider.jpg" alt="slider1" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="slider1.png" alt="slider2" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="onepage.jpg" alt="slider3" width="1100" height="500">
    </div>
  </div>
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#myCarousel">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#myCarousel">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>
</div>
<script>
$(document).ready(function(){
  // Activate Carousel
  $("#myCarousel").carousel();
  // Enable Carousel Indicators
  $(".item1").click(function(){
    $("#myCarousel").carousel(0);
  });
  $(".item2").click(function(){
    $("#myCarousel").carousel(1);
  });
  $(".item3").click(function(){
    $("#myCarousel").carousel(2);
  });
  // Enable Carousel Controls
  $(".carousel-control-prev").click(function(){
    $("#myCarousel").carousel("prev");
  });
  $(".carousel-control-next").click(function(){
    $("#myCarousel").carousel("next");
  });
});
</script>
</body>
</html>

Output

Bootstrap 4 Carousel


Related Topics

CakePHP Layouts & Elements

A layout includes a presentation code that can be wrapped out in your view. It means that what you want to see in your view should be well-positioned in layout. When you create...

9 minutes read.

Bootstrap List group

Bootstrap list group provides a group of a list of items. The most basic list is an unordered list. We can use <ul> element with .list-group class and <li> element with .lsit-group-item. Let us see...

3 minutes read.

Bootstrap 4 Card

In Bootstrap 4, a card is a bordered box with padding around its content. It has options for headers, footers, colors, content, etc. The card provides the link, title, image,...

8 minutes read.

Bootstrap 4 List Groups

Bootstrap 4 List Groups Bootstrap 4 offers List Group component, which is used to display a series of content in an organized way. The most common list group is an unordered...

13 minutes read.

Bootstrap 4 Icons

Bootstrap 4 Icons Bootstrap 3 contains the default icon library. But in bootstrap 4, you have to include the external icon library by yourself. Many free icon libraries are available such...

2 minutes read.

Bootstrap 4 Toast

Bootstrap 4 Toast Bootstrap 4 offers a Toast component, which is quite similar to the alert box and pushes notifications. The toast is visible on the screen for a few seconds when any...

5 minutes read.

Bootstrap Validation Example

Validation We can provide valuable and actionable feedback to the users through an HTML form validation. It happens via custom styles or behaviors of default browsers and JavaScript. How does validation work...

4 minutes read.

Bootstrap 4 Grid System

Bootstrap 4 Grid Systems Bootstrap offers a responsive and mobile-first grid system with the help of which we can divide the screen of the web browser into 12 horizontal parts. It has predefined classes...

4 minutes read.

Bootstrap Datepicker

What is a Bootstrap Datepicker? It is used to display a calendar with the date, month, and time from a dropdown menu. We will use an example to see how the date...

5 minutes read.

Bootstrap First Example

1) Add HTML5 doctype Before starting the example of Bootstrap, we should know about the some basic rules of Bootstrap. We have to add HTML5 doctype with lang element and CSS properties. <!DOCTYPE html>   <html lang="en">     <head>       <meta charset="utf-8">      </head>   </html> 2) Bootstrap...

2 minutes read.

Bootstrap 4 Inputs

Bootstrap Inputs Bootstrap Form Inputs – Several pre-defined input types are available in HTML and Bootstrap. These input types help in styling the forms. When an input type is specified in the form, it means...

10 minutes read.

Bootstrap Wells

In Bootstrap, well are used to add a rounded border around an element. It is default some padding and gray background color. It is like a container that displays the content....

1 minute read.

Bootstrap 4 Colors

Bootstrap 4 Colors Bootstrap 4 consists of classes that are used to set colors according to the context of the element, and with the help of these classes, we can read...

2 minutes read.

Bootstrap With CSS

← Prev Next → ...

1 minute read.

Bootstrap 4 Utilities

Bootstrap 4 Utilities Bootstrap 4 utilities also known as helper classes that are used to add more style to the components. Utilities are used to make the website or webpage more stylish or elegant....

10 minutes read.

Environment Setup

How to use Bootstrap? We can use bootstrap in our project either by downloading or by providing link of the library files. 1) Download Bootstrap files To download files, visit official site of bootstrap www.getbootstrap.com/download/ and...

1 minute read.

Bootstrap 4 Margin classes

Bootstrap 4 contains a variety of brief, responsive margin and padding utility classes to change the appearance of an element. The Bootstrap 4 margin classes use for the outer spacing of...

8 minutes read.

Bootstrap Images

Bootstrap 4 Images Bootstrap provides several classes for images to make them responsive and also helps to give some style to the images. Image Shapes Rounded Corners Bootstrap 4 offers .rounded class that makes the corners...

5 minutes read.

Bootstrap Protocol (BOOTP)

In the following article, we will learn about the Bootstrap Protocol and how it maintains contracts among linked devices on webwork. What is Bootstrap Protocol? The Bootstrap Protocol is a webwork contract...

3 minutes read.

Bootstrap 4 Grid Classes

Bootstrap 4 Grid Classes Extra-small Grid – In the extra-small grid system class, when you create the grid (columns), the columns will not be stacked on top of each other on...

8 minutes read.