How to stop Bootstrap carousel from autosliding?

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>

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

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

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'); 
});

Paste this code on your custom Javascript file.

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

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

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

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

> data-bs-interval="false"

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