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.

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

To control carousel slider enable script

<script type="text/javascript">
$(document).ready(function () {
// Activate Carousel with a specified interval speed
$("#myCarousel").carousel({ interval: 8000 });
// 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>

Carousel CSS Classes

.carousel	Creates a carousel
.carousel-indicators	Adds 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-inner	Adds slides to the carousel
.carousel-item	Specifies the content of each slide
.carousel-control-prev	Adds a left (previous) button to the carousel, which allows the user to go back between the slides
.carousel-control-next	Adds a right (next) button to the carousel, which allows the user to go forward between the slides
.carousel-control-prev-icon	Used together with .carousel-control-prev to create a "previous" button
.carousel-control-next-icon	Used together with .carousel-control-next to create a "next" button
.carousel-caption	Specifies a caption for the carousel
.slide	Adds 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

<!DOCTYPE html>
<html>
<head>
<title>CarouselSlider</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style type="text/css">
.carousel-inner img {
width: 100%;
height:350px;
}
</style>
</head>
<body>
<div class="container py-5">
<h4 class="text-center text-uppercase">Carousel Slides only</h4>
<div id="CarouselSlideOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Slider/Slide-1.jpg" alt="Slider-1" />
</div>
<div class="carousel-item">
<img src="Slider/Slide-2.jpg" alt="Slider-2" />
</div>
<div class="carousel-item">
<img src="Slider/Slide-3.jpg" alt="Slider-3" />
</div>
<div class="carousel-item">
<img src="Slider/Slide-4.jpg" alt="Slider-4" />
</div>
<div class="carousel-item">
<img src="Slider/Slide-5.jpg" alt="Slider-5" />
</div>
</div>
</div>
</div>
</body>
</html>

Output

Carousel Slider In Bootstrap Output

Example Carousel Slides with Controls

Adding in the previous and next controls.

<!DOCTYPE html>
<html>
<head>
<title>CarouselSlider</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style type="text/css">
.carousel-inner img {
width: 100%;
height:350px;
}
</style>
</head>
<body>
<div class="container py-5">
<h4 class="text-center text-uppercase">Carousel Slides with Controls</h4>
<div id="CarouselSlideWithControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Slider/Slide-1.jpg" alt="Slider-1" />
</div>
<div class="carousel-item">
<img src="Slider/Slide-2.jpg" alt="Slider-2" />
</div>
<div class="carousel-item">
<img src="Slider/Slide-3.jpg" alt="Slider-3" />
</div>
<div class="carousel-item">
<img src="Slider/Slide-4.jpg" alt="Slider-4" />
</div>
<div class="carousel-item">
<img src="Slider/Slide-5.jpg" alt="Slider-5" />
</div>
</div>
<a class="carousel-control-prev" href="#CarouselSlideWithControls" 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="#CarouselSlideWithControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>

Output

Example Carousel Slides With indicators

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

<!DOCTYPE html>
<html>
<head>
<title>CarouselSlider</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style type="text/css">
.carousel-inner img {
width: 100%;
height:350px;
}
</style>
</head>
<body>
<div class="container py-5">
<h4 class="text-center text-uppercase">Carousel Slides With indicators</h4>
<div id="carouselExampleIndicators" class="carousel slide" 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>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Slider/Slide-1.jpg" alt="Slider-1" />
</div>
<div class="carousel-item">
<img src="Slider/Slide-2.jpg" alt="Slider-2" />
</div>
<div class="carousel-item">
<img src="Slider/Slide-3.jpg" alt="Slider-3" />
</div>
<div class="carousel-item">
<img src="Slider/Slide-4.jpg" alt="Slider-4" />
</div>
<div class="carousel-item">
<img src="Slider/Slide-5.jpg" alt="Slider-5" />
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>

Output

Example Carousel Slides With Captions

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

<!DOCTYPE html>
<html>
<head>
<title>CarouselSlider</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style type="text/css">
.carousel-inner img {
width: 100%;
height: 350px;
}
</style>
</head>
<body>
<div class="container py-5">
<h4 class="text-center text-uppercase">Carousel Slides With indicators</h4>
<div id="carouselExampleIndicators" class="carousel slide" 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>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Slider/Slide-1.jpg" alt="Slider-1" />
<div class="carousel-caption">
<h5>Slider-1</h5>
<p>This is slider-1</p>
</div>
</div>
<div class="carousel-item">
<img src="Slider/Slide-2.jpg" alt="Slider-2" />
<div class="carousel-caption">
<h5>Slider-2</h5>
<p>This is slider-2</p>
</div>
</div>
<div class="carousel-item">
<img src="Slider/Slide-3.jpg" alt="Slider-3" />
<div class="carousel-caption">
<h5>Slider-3</h5>
<p>This is slider-3</p>
</div>
</div>
<div class="carousel-item">
<img src="Slider/Slide-4.jpg" alt="Slider-4" />
<div class="carousel-caption">
<h5>Slider-4</h5>
<p>This is slider-4</p>
</div>
</div>
<div class="carousel-item">
<img src="Slider/Slide-5.jpg" alt="Slider-5" />
<div class="carousel-caption">
<h5>Slider-5</h5>
<p>This is slider-5</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>

Output

2 Comments

Join the conversation! Your thoughts help the community grow.

Prabu Elavarasan8y ago
Another good article. BTW, Do we have any custom carousel? Or any idea how to create our own custom Carousel?
- Farhan Ahmed8y ago
  Thank you for your valuable comment. Yes we can customize size of slider, speed, multi column slider and many more as our requirement.