AZMIND.
Carousel bootstrap autoplay
This is Slide 3, the Last One
After you download it, you can customize and use it as you like. That's great!
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.
Carousel Template with Bootstrap 4
This is a free Carousel template made with the Bootstrap 4 framework. Click on the button below to stop / start the autoplay:
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]:
Carousel Template with Bootstrap 4
This is a free Carousel template made with the Bootstrap 4 framework. Click on the buttons below to stop / start the autoplay:
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.