57

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 stop autosliding and only slide when the user clicks on the left or right arrows? I have pasted the code below.

    <div class="container">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-pause=hover>
            <!-- 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">
                    <div class="embed-responsive embed-responsive-16by9">
                        <video class="embed-responsive-item" autoplay muted id="homevid">
                            <source src="C:\Development Software\Sample Website\videos\Michael Vick 88 yard touchdown pass to DeSean Jackson.mp4" />
                        </video>
                    </div>
                <div class="carousel-caption">

            </div>
        </div>
            <div class="item">
                <div class="embed-responsive embed-responsive-16by9">
                    <video class="embed-responsive-item" autoplay muted id="homevid">
                        <source src="C:\Development Software\Sample Website\videos\Vick to Jeremy Maclin for 50 Yard TD.mp4" />
                    </video>
                </div>

            </div>
            <div class="item">
                <div class="embed-responsive embed-responsive-16by9">
                    <video class="embed-responsive-item" autoplay muted id="homevid">
                        <source src="C:\Development Software\Sample Website\videos\Michael Vick Scramble Plays vs Rams 2011.mp4" />
                    </video>
                </div>
          </div>
    </div>
j08691
  • 204,283
  • 31
  • 260
  • 272
user3123222
  • 1,185
  • 2
  • 10
  • 13

9 Answers9

141

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.

2021 Update

In Bootstrap 5 it is data-bs-interval="false"

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

Documentation

Brian Dillingham
  • 9,118
  • 3
  • 28
  • 47
34

There are two ways.

1.

Update 2022: Bootstrap 5.x

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

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

Bootstrap 4.x

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 :)

Harshil Modi
  • 397
  • 3
  • 8
  • 15
Vinod Kumar
  • 1,191
  • 14
  • 12
  • Thanks for the Javascript part. I had the `data-interval="false"` but it wasn't working because somewhere in my code was the `$("#carousel-id").carousel()`. I didn't realize that leaving `carousel()` with no params was activating it. – Azurespot Jan 09 '21 at 05:24
11

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'); 
});
Abhay Singh
  • 1,595
  • 1
  • 23
  • 40
5

Paste this code on your custom Javascript file.

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

Tariqul_Islam
  • 527
  • 7
  • 7
3

There is an update on bootstrap https://getbootstrap.com/docs/5.1/components/carousel/

data-bs-interval="false"

IrinaPenzina
  • 53
  • 4
2

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

<Carousel interval={null}>
   ...
</Carousel>
DahWaR
  • 76
  • 5
2

for bootstrap v5.2: Just remove "data-bs-ride:carousel" part from the div tag having "carousel slide" in order to stop the auto-slide

Pushan Basu
  • 21
  • 1
0

By adding data-interval="false" and removing data-ride="carousel" to the carousel id or class

Mohd Amir
  • 1
  • 1
0

I spent a lot of time on why data-bs-ride=false does not work for this and i understand it now.

In version 5.0 and 5.1, notice in documentation under options subsection it says

Autoplays the carousel after the user manually cycles the first item. If set to 'carousel', autoplays the carousel on load.

This just means that data-bs-ride=false, data-bs-ride=true or data-ride="carousel" it will still auto slide so we have to use

data-interval="false" and remove data-ride="carousel"

But in version 5.2 the documentation says that

If set to true, autoplays the carousel after the user manually cycles the first item. If set to "carousel", autoplays the carousel on load.

So, we can stop the autoplay by just using data-bs-ride=false or just removing data-bs-ride tag bc it is by default false.

Suchint
  • 251
  • 2
  • 6