web-dev-qa-db-fra.com

Comment arrêter Bootstrap carrousel de glissement automatique?

J'ai construit un bootstrap carrousel vidéo. Il fonctionne très bien mais, le seul problème que j'ai, c'est que le carrousel continue de glisser vers la diapositive suivante après 5 secondes. Comment puis-je l'empêcher de glisser automatiquement et glisser uniquement lorsque l'utilisateur clique sur les flèches gauche ou droite? J'ai collé le code ci-dessous.

    <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>
htmltwitter-bootstrapcarousel
17
user3123222

En ajoutant data-interval="false"

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

De la documentation

Option - Intervalle - ..Si faux, le carrousel ne cyclera pas automatiquement.

51
Brian Dillingham

Il y a deux façons.

1.

Dans vos codes HTML, vous devez utiliser uniquement data-interval = "false"

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

2.

Si vous voulez faire avec l'aide de Jquery, vous devez ajouter.

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

Merci :)

12
Vinod Kumar

Pour arrêter la lecture automatique, il suffit de supprimer l'attribut data-ride = "carrousel" du code html

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

Il existe une autre façon d'arrêter la lecture automatique, ajoutez simplement le code ci-dessous dans votre fichier js

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

Collez ce code sur votre fichier Javascript personnalisé.

$ ('. carrousel'). carrousel ({intervalle: faux});

1
Tariqul_Islam