He construido un bootstrap de vídeo carrusel. Se está trabajando muy bien, pero, el único problema que tengo es el carrusel mantiene deslizante a la siguiente diapositiva después de 5 segundos. ¿Cómo puedo hacer que deje de autosliding y sólo se deslice cuando el usuario hace clic en las flechas izquierda o derecha? He copiado el código de abajo.

    <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>
InformationsquelleAutor user3123222 | 2014-10-01

4 Comentarios

  1. 28

    Mediante la adición de data-interval="false"

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

    De la documentación

    Opción de Intervalo – ..Si es false, el tiovivo no hará automáticamente el ciclo.

  2. 7

    Hay dos maneras.

    1.

    En su código HTML, es necesario utilizar sólo de datos de intervalo=»false»

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

    2.

    Si quieres hacer con la ayuda de Jquery, entonces usted necesita para agregar.

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

    Gracias 🙂

  3. 0

    Para detener la reproducción automática está eliminando el atributo de datos-ride=»carrusel» de la htmlcode

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

    Hay otra manera para detener la reproducción automática acaba de agregar a continuación el código en su archivo js

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

Dejar respuesta

Please enter your comment!
Please enter your name here