In this tutorial we’ll see how to stop the Autoplay function on a Bootstrap carousel.

If you’ve used this component of the Bootstrap framework before, you probably know that by default it cycles through elements automatically as soon as the page is loaded.

This is a nice feature to have, but in certain situations you might not want it. Instead, you might need a static carousel that stops “on page load” or one that stops and starts based on various events that happen on the page, like for example when the user scrolls down the page, clicks on a button or link, etc.

Here we’ll see 3 examples beginning with a simple carousel with no autoplay and then using buttons for pausing and starting the auto slide again.

For this tutorial we’ll use one of these carousel templates (template 3) as an example. At the end you can download all the example templates. Let’s begin!

1. Simple Stop: Remove the Autoplay at Load Time

To remove the autoplay entirely and have a simple carousel that doesn’t cycle, you can do it in two ways.

First, let’s see the HTML code of our carousel (file “index.html”):

The HTML code is very simple. Now, the first way to stop the autoplay is by just removing the attribute data-ride=”carousel” from the code above.

The second way, or the JavaScript way, is the one I’ve used in this case. I’ve added this code to the file “scripts.js” (in “assets/js”):

jQuery(window).load(function() { /* Stop carousel */ $('.carousel').carousel('pause'); });

The carousel component comes with some other methods that you can see in the documentation here.

The carousels in these examples use also some CSS for styling. I’m not showing the code here to keep the tutorial short, but you can find it in the files “style.css” and “media-queries.css” (in the folder “assets/css”).

You can see a PREVIEW of this example HERE.

2. Stop on Button Click (and Start Again on Click)

In this example we use a button to make the carousel cycle or pause when the user clicks on it. It looks like this:

Here is the HTML code I’ve added to the carousel for the button (file “index.html”). I’m not showing all the carousel’s code here, just one slide.

I’ve added the button’s code to all the slides.

To make it work, I use this JavaScript (jQuery) code (in file “scripts.js”):

/* Stop / Start carousel autoplay */ $('.btn-customized').on('click', function(){ if( ! $(this).hasClass('paused') ) { $('.carousel').carousel('pause'); $('.btn-customized').toggleClass('paused'); $('.btn-customized i').removeClass('fa-pause').addClass('fa-play'); $(this).blur(); } else { $('.carousel').carousel('cycle'); $('.btn-customized').toggleClass('paused'); $('.btn-customized i').removeClass('fa-play').addClass('fa-pause'); $(this).blur(); } });

To style the button I use some CSS code, as usual, in the file “style.css”.

You can see a PREVIEW of this example HERE.

3. With Two Buttons: Pause and Play

In this case we use two buttons instead of one, Pause and Play, or Stop and Start if you like. It looks like this:

Here is the HTML code (only one slide):

And here is how we make it work with JavaScript (jQuery):

/* Stop / Start carousel autoplay */ $('.btn-customized').on('click', function(){ if( ! $(this).hasClass('disabled') ) { if( $(this).hasClass('btn-pause') ) { $('.carousel').carousel('pause'); } else { $('.carousel').carousel('cycle'); } $('.btn-pause, .btn-cycle').toggleClass('disabled'); $(this).blur(); } });

You can see a PREVIEW of this example HERE.

Download and License

DOWNLOAD: Bootstrap Carousel with No Autoplay (1013 downloads)

LICENSE:

You can use these templates in personal and commercial projects, but you can’t sell or distribute them directly, “as is”. If you plan to use them, a link to this page or any form of spreading the word will be much appreciated.

Conclusion

Disabling the Autoplay feature of a Bootstrap carousel is easy, you can do it with a few lines of HTML/CSS and JavaScript code. I hope that after reading this tutorial, you find it even easier 😉 !

So, download the examples above, play with them, make your own experiments and if you have any question or suggestion, let me know in the comments below.

Subscribe to the Azmind Newsletter and I’ll update you as soon as I release a new WordPress Theme, Bootstrap Template, Tutorial or other Freebie:

Subscribe

To learn how we use your data when you sign up to our newsletter, read our Privacy Policy here.