How to stop Bootstrap carousel from autosliding?

Question

I have built a bootstrap video carousel. It is working just fine but, the only problem I have is the carousel keeps sliding to the next slide after 5 seconds. How do I make it s

Answer 1

By adding data-interval="false"

<div id="carousel-example-generic" class="carousel slide" data-interval="false" data-ride="carousel" data-pause="hover" >

From the documentation

Option - Interval - ..If false, carousel will not automatically cycle.

Answer 2

Paste this code on your custom Javascript file.

$('.carousel').carousel({ interval: false });

Answer 3

To stop the autoplay is by just removing the attribute data-ride=”carousel” from the htmlcode

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

There is another way to stop autoplay just add below code in your js file

$(window).load(function() {
    $('.carousel').carousel('pause'); 
});

Answer 4

In react-bootstrap in order to stop cycling you have to use

<Carousel interval={null}>
   ...
</Carousel>

Answer 5

There are two ways.

1.

In your HTML code, you need to use data-interval="false"

<div id="your-carousel-id" class="carousel slide" data-interval="false">
</div>

2.

If you want to do with the help of Jquery then you need to add.

//document ready
$(document).ready(function(){
    //Event for pushed the video
    $('#your-carousel-id').carousel({
        pause: true,
        interval: false
    });
});

Thanks :)