Introduction to carousel
Do you know what the carousel has to do in web designing? The word “Carousel” is very famous in the world of Web Designing. Many web designers use carousels on their web pages more often. Initially, web designers used to slide images on their websites, mainly for banners.
For this, they used some image slider, which was made with the help of JavaScript or jQuery. But as time passed, they needed to slide other HTML elements to the web page too.
Initially, the HTML's marquee tag was quite useful, but there was a problem with it that it constantly used to slide the elements. When hovering the mouse on marquee elements, we could stop scrolling with the help of JavaScript. But it did not help in all of our presentations. We could not show the elements one by one.
For example, we want to show a list of some products and some of the information about each product is displayed with it. This information can be Product Name, Product Price, Product Description and so on. And finally, I want to see two products on screen at a time. And when I click the Next or Previous button, then only see the next or previous products on the list. This can be done by the carousel.
Carousel in Bootstrap
The bootstrap has a plugin for the carousel. By installing this plugin, we can slide any element of HTML one by one. In this, we can also add the next or previous button. Such as the slideshow carousel. You can use the bootstrap carousel in your project by downloading just the carousel.js file instead of downloading the full bootstrap JS file. Or if you want, you can also use the carousel plugin by downloading the bootstrap.js file or bootstrap.min.js file too. The carousel plugin is included in these files as well.
If you are using the bootstrap's carousel then there is a small problem in it. You should also know about it. The carousel does not work correctly in IE 9 or earlier versions. Because in the bootstrap’s carousel, CSS 3's transition and animation properties are used to give effects. And these properties of CSS do not get support in IE9 and older versions.
So if you want to use this plugin, then you must know that your website will not render well in front of users using IE 9 or older versions. Only users with latest browsers will be your target audience. In this blog, I will make the carousel only with the help of CSS classes. How to make it from jQuery I will tell it in the next blog.
So let's start.
Creating Carousel with Bootstrap
There are some classes in the bootstrap through which we make carousel. First of all, look at the list of these classes.
.carousel – This creates a carousel. It should be given to the element which wraps all items..slide – this class is used to give CSS transition and animation effect to our carousel item when they slide. You can also remove it if you don’t want to animate your element while cycling..carousel-inner – This class is a wrapper of our all slides which actually slide..item – this class carries the data which you want to slide. It is used multiple time for each sliding element..active – This class is given to the first item or the item you want to show first in your carousel.
These given classes are just for making basic carousel. It can also add an indicator or/and navigator which we will see in the second example. Come on, we make something from it.
At first, we would have to make a wrapper. For this we take a <div> tag.
<div>
</div>
Now we will have to add an ID to this div. This ID is the ID of this carousel. Which will help to target this carousel.
<div id="myCarousel">
</div>
Now add two classes in it. The first class will be the “.carousel”. This will put all the CSS effects of the carousel into it. And the second class will be “.slide”. In this class, as we have already discussed, transition and animation effects will go into it.
<div id="myCarousel" class="carousel slide">
</div>
This made our carousel's outer wrapper ready. Now we have to make its inner wrapper. For this, another div element will be created inside the outer wrapper and it will be given only one class: ".carousel-inner"
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
</div>
</div>
Now within this we will create separate slides with the “.item” class. I have temporarily put some demo data in it.
And also we will give an active class to the first item. By giving it, it will be visible first and other items will remain hidden.
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
Hello,
</div>
<div class="item">
how
</div>
<div class="item">
are
</div>
<div class="item">
you!
</div>
</div>
</div>
Our carousel is almost complete. Now just to make it run we have to do one more thing. In the outer wrapper of the carousel, we have to add this attribute: data-ride="carousel". And done. Our carousel is now running.
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
...
</div>
</div>
Now, for better look, I’m going to give some CSS to my carousel.
.carousel .item {
background-color: #900;
color: #fff;
text-align: center;
font-size: 5em;
padding: 50px;
}
That’s all. We have finished it. This is a very basic carousel. checkout the result here:
See the Pen VWGzod by Ashish Rampal (@ashishrampal) on CodePen.
Creating Carousel Indicators
The next thing we will add is the carousel indicator. You will often see some round shapes below the carousel or image slider. These are called indicators.
The question now is how to use it in bootstrap carousel.
For this, we will create an ordered list (<ol>) or unordered list (<ul>) HTML element along with the carousel-inner div inside the outer wrapper of Carousel. We will give the ".carousel-indicators" class to this order list or unordered list element. All <li> elements created inside it, will be automatically converted to indicators of the carousel. For this, we do not need to give any specific class in any list item.
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
To connect all these list items with the slides of the carousel, we must add some attributes. These attributes will be data-target="#myCarousel". "#myCarousel” is the ID of the outer wrapper of our carousel. Now all the indicators know which carousel is to be targeted. After the connection to the carousel, these list items have to be connected with slides. For this, we will give data-slide-to=”0” attribute. Here 0 means first slide. For the second slide, we will write 1 instead of 0 and so on. After this, we will give the class name ".active" to the first <li> element, so that this indicator will appear in the active form.
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
That’s all, Indicators are ready to work in our carousel.
Finally, The carousel controls
Now we add the last thing in our carousel, which is navigation controls. There will be two controls in our carousel, the first is left control and the second is right. In our example, we will use anchor tags of HTML to give them both.
First of all, we make the left control. For this, first, make an anchor class as a sibling of the carousel inner element. In the “href” attribute of this anchor tag, we will give the same ID which is the ID of our carousel. This will be something like this.
<a href="#myCarousel">
</a>
Now we will add the class attribute to it. It will be given two classes. The first will be ".left" and the second will be ".carousel-control". And finally, we will add another attribute to it: data-slide="prev".
<a href="#myCarousel" class="left carousel-control" data-slide="prev">
</a>
Whatever we write inside this anchor tag, it will be seen in our carousel. But here it is better to put an icon pointing to the left side. For this, we can use icons of bootstrap. Add this line with span tag to insert this icon.
<a href="#myCarousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
For screen reader devices only, we will add another span tag with class name ".sr-only" and also add text "Previous". Which will be something like this.
<a href="#myCarousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
As we have added left control, we can also add right control. For that, first, make a copy of this anchor tag and then we have to make a couple of changes. These changes are the following:
- Give
".right" class instead of ".left" in anchor tag.
- In the
data-slide attribute of anchor tag, replace the prev by the next.
- Change the icon's class glyphicon-chevron-left to
glyphicon-chevron-right.
- And finally, in the
<span class="sr-only"> element, replace "Previous" by "Next".
<a href="#myCarousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
That's All!
The end result is here.
See the Pen QgZEEg by Ashish Rampal (@ashishrampal) on CodePen.
Wrapping It Up
In this tutorial, you saw what is carousel and how we can make carousel with the help of Bootstrap. I Hope you enjoyed the tutorial. Do let me know your thoughts in the comment section below.