Blog

Bootstrap Carousel Tutorial

25th November, 2014 Bootstrap,

Bootstrap Carousel Tutorial

A feature that is used on the home page of most modern websites is a full width banner, using professional images will enhance your website appearance. It’s also a great way to display business messages, promote products or certain core areas of your business.

It’s a fairly simple installation to get your banner carousel working, following the tutorial below will provide you with a working rotating banner.

You will need to call up the latest jQuery library, you can download this from a number of places but in this tutorial we call it from a Google hosted library, at the time of writing this is version 1.11.1.

Place the code below in between your head tags if you want to use Google.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

To get the carousels functionality you will need to add the carousel script to your website, you can get this from the Bootstap website, there are lots of other options available for Bootstrap components, but if you aren’t sure and just want the carousel script you can use this link to select the required files http://getbootstrap.com/customize/?id=7ab60b696083e0e5ec5a

You will need to scroll to the bottom of the page to find the Compile and Download button. Once you have downloaded your custom version of Bootstrap, locate the bootstrap.js or the bootstrap.min.js file this will be inside the js folder. You will need the bootstrap.css file or bootstrap.min.css found in the css folder. Once you have found the files copy them to your website folder, call the script from inside your footer, this helps your page load quicker. It’s important to make sure you adjust the path to point to the correct file location or it won’t work. Please also copy the folder called fonts to your website folder, these fonts are used for the carousel controls.

<script src="js/bootstrap.js">
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">

You now need to add the main carousel code, the minimum code needed is shown below. You will need to change the locations of your banner images and if you have more than two banners you will need to add additional divs using the class item. If you want to keep the indicators, these are the small circles at the bottom of a banner to indicate how many banner images there is and what is the current active one you will need to add an extra list item

<li data-target="#carousel-example-generic" data-slide-to="1"></li>

Adjusting the data-slide-to argument to the relevant banner number. If you don’t want indicators you can remove the Indicators section from your code.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<!-- Indicators -->
<ol class="carousel-indicators">
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
     <li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol> 

<!-- Wrapper for slides -->
<div class="carousel-inner"> 
     <div class="item active"> 
          <img src="images/banner1.jpg" width="2000" height="400" alt="Banner 1" /> 
          <div class="carousel-caption">
               <h1>Banner One</h1>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quam diam, suscipit ac neque et, pellentesque consectetur nisi. </p>
          </div>
     </div>
     <div class="item"> 
          <img src="images/banner2.jpg" width="2000" height="400" alt="Banner 2" /> 
          <div class="carousel-caption">
               <h1>Banner Two</h1>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quam diam, suscipit ac neque et, pellentesque consectetur nisi.</p>
          </div>
     </div>
</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
     <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right"></span>
</a>

</div>

In most cases your carousel should be working, to call the carousel manually you can use the following code. You can also use this code to add additional options such as controlling the time delay between each banner image. The code below is set at 5000, you can set this too false if you don’t want it to automatically cycle. Note: 1000 = 1 second

<script>
$(document).ready(function(){
     $('.carousel').carousel({
     interval: 5000
     });
});
</script>

Is your Bootstrap Carousel not working?

If you’ve followed all the steps above there should be no fault with your code, recheck your links and make sure you’re calling the jQuery library before calling the Bootstrap script.

If you want to find out more about the Bootstrap Carousel, such as additional options, method and events please click here!