Select Page

Do you want to learn how to create an awesome carousel? I will teach you how to create a bootstrap 4 carousel with ease. More specifically today you will learn to create an image carousel and a slider text carousel.

Before getting started with the real stuff lets first know what is a carousel.

What Is A Carousel? 

Carouse is a slideshow component for cycling through elements, mostly images or slider text. A Carousel can also be called as a slider.

Why Bootstrap 4 Carousel?

Bootstrap 4 is the latest version of bootstrap. Bootstrap is not only the best CSS framework but also the most popular CSS framework of all time. Therefore using a bootstrap 4 carousel is easy and reliable.

Now you know all that you needed to know before learning to create a carousel.

So let’s get started with the real stuff now.

How to Create A Bootstrap 4 Carousel

Integrating Bootstrap 4

Firstly we need to integrate bootstrap in our website

Just place the following code into the head section of your website to get started the bootstrap 4.

[html]
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
[/html]

NOTE: You can also add the javascript files at the end of your website just before the </body> tag to make your site load faster.

And that’s it you have now successfully integrated bootstrap 4 in your website.

If you don’t want to use

Creating Your First Carousel/Slider

Now we will create your first bootstrap carousel.

I have created this one. Its the most basic carousel with no controls

This is the HTML div which you can use to create a carousel like this.

[html]
<div id="myfirstcarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="image1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="image2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="image3.jpg" alt="Third slide">
</div>
</div>
</div>
[/html]

This is just a basic bootstrap carousel you can also add more functionality to it by using controls, indicators, etc.

Understanding The Code

Firstly we used the .carousel class for the outer most div which defines that this div is a carousel and give it a unique id. We also need to give it a data-ride attribute and set it to carousel so that bootstrap will come to know that it is a carousel.

To get the slide effect while changing the slides you need to add a .slide class to the .carousel div.

[html]
<div id="uniqueid" class="carousel slide" data-ride="carousel" > …… </div>
[/html]

Next, we have used the .carousel-inner this class is used like a content wrapper to wrap all the carousel items within it.

[html]
<div class=’carousel-inner’ > …… </div>
[/html]

After that, we had used the .carousel-item. These are carousel items or maybe we can also call them as slides these divs should contain all the elements that you want to display in that particular carousel-item.

You can add as many carousel items you want.

[html]
<div class="carousel-item active">
<img class="d-block w-100" src="image1.jpg" alt="First slide">
</div>
[/html]

Adding Controls To Your Carousel

As you have successfully created your first bootstrap carousel now we will move a step ahead and add some controls to it.

It’s really easy to add controls to the bootstrap carousel.

First, let us see a demo of how your carousel will look after you add controls to it.

This looks better than before, right?  As of now to achieve this you just need to add a few lines of code to your previous code.

Here’s the additional code that you need to add to your existing code.

NOTE: You need to add the additional code inside the .carousel div.

[html]
<a class="carousel-control-prev" href="#uniqueid" 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="#uniqueid" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
[/html]

After you add the above code to your existing code your code should look something like this –

[html]
<div id="myfirstcarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="image1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="image2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="image3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#myfirstcarousel" 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="#myfirstcarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
[/html]

Understanding The Code

Basically, the name class says what it does. Therefore I think that I don’t need to explain it again and in case if you have any problem you can always ask me in the comments section below.

Using Indicators With Your Carousel

Now we will add the indicators to the bootstrap carousel. Adding indicators to your carousel will make it more attractive and also easier for people to understand it.

A Demo of a bootstrap 4 carousel with indicators.

To add the indicators to your carousel you need to create an ordered list and add list-items to it.Don’t forget to set the data-target attribute to #uniqueid of the .carousel div.

This is the code that you need to add for showing indicators to your div. You need to add this ordered list at the starting of .carousel div.

[html]
<ol class="carousel-indicators">
<li data-target="#uniqueid" data-slide-to="0" class="active"></li>
<li data-target="#uniqueid" data-slide-to="1"></li>
<li data-target="#uniqueid" data-slide-to="2"></li>
</ol>
[/html]

Make sure the number of list items you add to the unordered list is equal to the number of carousel items you have and you need to data-slide-to numbers from 0 and not start from 1.

NOTE: You need to add a .active class to one of the slides else the slides would not be visible.

Adding Captions To Your Slides

How great would it be to add some awesome text on your slides !! Even that’s possible with the bootstrap carousel.

Here’s an awesome bootstrap 4 carousel with captions look like –

This is the code that you need to add captions to your bootstrap carousel.

[html]
<div class="carousel-caption">
<h3> My Awesome Slide Caption Title </h3>
<p>Some Text</p>
</div>
[/html]

You need to add the above code to after the <img .. /> tag in the .carousel-item class div.
So your .carousel-item div should look like this –

[html]
<div class="carousel-item">
<img src="…" alt="…">
<div class="carousel-caption">
<h3>…</h3>
<p>…</p>
</div>
</div>
[/html]

And Your complete code till now must me something like this –

[html]</pre>
<div id="mycarousel" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="myimage.jpg" alt="First slide">

<div class="carousel-caption">
<h3> My First Slide </h3>
<p> Some Text</p>
</div>

</div>
<div class="carousel-item">
<img class="d-block w-100" src="myimage2.jpg" alt="Second slide">
<div class="carousel-caption">
<h3> My Second Slide </h3>
<p> Some Text</p>
</div>

</div>
<div class="carousel-item">
<img class="d-block w-100" src="myimage3.jpg" alt="Third slide">

<div class="carousel-caption">
<h3> My Third Slide </h3>
<p> Some Text</p>
</div>

</div>
</div>

<a class="carousel-control-prev" href="#mycarousel" 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="#mycarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

</div>
[/html]

And Thats it you have successfully created a bootstrap carousel.

If you have any problem while creating your bootstrap carousel don’t hesitate to ask me in the comments section below.

One more thing please don’t forget to share it with your developer friends.

Need Help? Chat with us
Share This