bootstrap 3 carousel

Bootstrap 3 Carousel Tutorial

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.

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.

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.

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.

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.

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.

Christopher Gimmer

Christopher is an entrepreneur & the co-founder of BootstrapBay. He helps web designers, developers and entrepreneurs utilize the power of Bootstrap. Connect with him on Twitter.