Bootstrap includes a handy plugin and component for cycling through slider images like a carousel. Sliders can be a great way to feature important content on your website.
In the following tutorial, we’ll show you exactly how you can add a carousel to your Bootstrap 3 website. It simply requires some HTML markup and a couple lines of JavaScript if you want to adjust the settings using that method.
Update – Bootstrap 4 Carousel Tutorial
HTML Code. We used images from Unslpash for slider.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<style>
.red
{
color: white;
background-color: red;
}
.green
{
color: white;
background-color: green;
}
.blue
{
color: white;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<br />
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="https://azoom-sites.rockthemes.net/abboxed/wp-content/uploads/sites/14/2015/05/abboxed-restaurant-portfolio2.jpg" alt="First Slide" />
</div>
<div class="carousel-item">
<img src="https://azoom-sites.rockthemes.net/abboxed/wp-content/uploads/sites/14/2015/05/abboxed-beach-portfolio.jpg" alt="Second Slide" />
<div class="carousel-caption">
<h2>Best Caption Title</h2>
<p>Oh yh it is indeed!!!!!! :D</p>
</div>
</div>
<div class="carousel-item">
<img src="https://azoom-sites.rockthemes.net/abboxed/wp-content/uploads/sites/14/2015/05/abboxed-beach-portfolio2.jpg" alt="Third Slide" />
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
Step 2 – Load jQuery and Bootstrap JavaScript
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
</body>
</html>
Result
Bootstrap 3 Carousel Tutorial
Screencast
Step 1 – Add the HTML Markup
The first thing you need to do is copy and paste the following code into your HTML file. You’re encouraged to change the carousel-example-generic id to something more unique. If you do, make sure to reference it properly throughout the markup. We also used placeholder images that you’ll need to replace with your desired slider images.
<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>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="https://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="https://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</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> <!-- Carousel -->
The indicators are the small radio buttons underneath the caption which are filled in when they’re active. The indicators are declared using an ordered list.
The wrapper contains the slider images and the captions (optional). Don’t forget to modify the alt description.
The controls are the left and right arrows at the ends of the slider images. This allows users to manually toggle back and forth between the sliders.
Step 2 – Load jQuery and Bootstrap JavaScript
If you copied and pasted the basic Bootstrap template like we did in our installation tutorial, this step is already completed. If not, you will need to load the bootstrap.min.js file and jQuery by adding the following scripts at the end of your HTML file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script>
Since HTML is loaded from top to bottom, you want to add your java script code at the bottom of the page for performance reasons. In the code above, we’re using the CDN hosted version of jQuery. You can also download the latest jQuery library and save it in your js folder and load it the same way as your bootstrap.min.js file.
The carousel should now begin to function automatically thanks to the bootstrap.min.js file. By default, slides will rotate at a rate of 5 seconds. However, we can change this in the next step.
Step 3 – Adjust the Settings (Optional)
Bootstrap also provides various carousel options that change how the carousel functions. Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-interval="". Below are some adjustments you can make to the carousel settings.
| Name | type | default | description |
|---|---|---|---|
| interval | number | 5000 | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. |
| pause | string | “hover” | Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. |
| wrap | boolean | true | Whether the carousel should cycle continuously or have hard stops. |
Let’s say we wanted to change the interval between slides to 3 seconds instead of 5 seconds (5,000 milliseconds). There’s two ways to accomplish this.
Data Attributes Method
Add data-interval="3000" to your carousel div like this.
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">
JavaScript Method
Add the following JavaScript code at the end of your HTML file. You can add any settings you wish within the carousel function.
<script>
$('.carousel').carousel({
interval: 3000
})
</script>
The full list of optional settings is available on the getBootstrap JavaScript page.
Conclusion
By now you should have a fully functional Bootstrap carousel implemented on your site. If you want to show us your work or if you have a question, hit us up in the comments below.
