1

Estoy editando un slider, y resulta que quiero darle un tiempo de velocidad diferente a cada una de las paginas del slider, resulta que la velocidad del slider se inserta al inicio y en una sola area.

Aqui un ejemplo:

autoplaySpeed = 60000, 
autoplayTimeout = 60000,

esa propiedad afecta a todos los slider, me gustaria que afectara a alguno por individual.

Estoy usando la biblioteca de owl-carousel v2.3.4

La propiedad que quiero dividir para cada slider es la del autoplayspeed.:

   $(document).ready(function(){
        var imgItems = $('.slider caption').length; // NUMERO DE SLIDES
        var imgPos = 1;
        var video = document.getElementById('myAudio');
        var owl = $('.owl-carousel');
        owl.owlCarousel({
            loop: false,
            autoplay: true,
            items: 1,
            dots: false,
            animateOut: 'fadeOut',
            autoplaySpeed = 60000,
            utoplayTimeout = 60000,
            nav: true,
            
        })
        
         /* 
        function nextSlider(){
            if(imgPos >= imgItems){
                imgPos = 1;
                owl.trigger('play.owl.autoplaySpeed',[60000]);
                owl.trigger('play.owl.autoplayTimeout',[60000]);
            }else if(imgPos >= imgItems){
                imgPos++;
            }
        }
        */
        owl.trigger('refresh.owl.carousel');
        $('.play').on('click', function(){  
            owl.trigger('play.owl.autoplay',[60000]);
            myAudio.play();
            
        });
      
        $('.stop').on('click', function(){
            owl.trigger('stop.owl.autoplay');
            myAudio.pause();
        });
    
        $('.mute').on('click', function(){
            myAudio.muted = true;
    
        });
        $('.unmute').on('click', function(){
            myAudio.muted = false;
    
        });
    
      
            //Objeto con referencia a la etiqueta audio     
            myAudio = document.getElementById("myAudio");
            //Objeto con referencia al boton play
            playBtn = document.getElementById("play");
            //Objeto con referencia al boton pause
            pauseBtn = document.getElementById("pause");
            muteBtn = document.getElementById("mute").muted;
        
        
            //Añadiendo funcionalidad a los botones del reproductor
            playBtn.addEventListener("click", play, true);
            pauseBtn.addEventListener("click", pause, true);
            muteBtn.addEventListener("click", muted);
      
    });

He intentado crear funciones con if, e intentar obtener la paginación o el index de cada slider, para así saber en qué slider estoy situado y darle propiedades diferentes, pero la biblioteca que estoy usando carece de position, si pudiera acceder a la posición, podría darle un audio diferente a cada slider y tiempo diferente.

También intenté que el slider pasara cuando el audio que estaba reproduciendo se acabara, pero todo llevo a nada, me gustaría que me pudieran ayudar exactamente a establecer un audio por slider, o a que cada slider tenga un tiempo en específico, así podría insertarle música sin preocuparme por el tiempo. ` Este es el html del slider:

    <div class="slider">
        <div class="owl-carousel">
            <div class ="slide slide1">
                <img src="img/d7e1725b3801fb6cdeb212884c893f79.jpg"/>   
                <div class="caption">COOPERATIVA VEGA REAL
                    </div>
            </div>
            <div class= "item">
                <img src=" "/>  
                <div class="caption0" >
                    <video id="myAudio" autoplay controls>
                        <source src="medios/2.mp4" type="video/mp4" >
                    </video>
                    </div>
                <span>1 of 100 </span>
            </div>
            <div class ="item">
                <img src=" "/>
                <div class="caption1"><h1>Sincronización</h1>
                <p>Este entrenamiento durara aproximadamente 45 minutos.</p>
                <p>Puede ver su progreso en la parte inferior de la pantalla</p>
                <p>Puede retroceder una pantalla seleccionando el boton "Atras" en la barra de navegacion.</p>
                <p>para continuar, seleccione el boton de flecha en la esquina inferior derecha de la pantalla.</p>
                <p>Cuando termine de escuchar el audio, solo debe esperar 5 segundos y se adelantara solo</p>
                <p>Si desea leer el texto, puede ponerlo en pausa</p>
                </div>
                <span>2 of 100 </span>
            </div>
            <div class ="item">
                <img src=" "/>  
                <div class="caption1"><h1>Audio</h1>
                    <p>Este entrenamiento tiene audio, incluyendo un narrador y actores de voz.</p>
                    <p>Pueden ver el guin de narracion seleccionado el boton de subtitulos en la barra de navegacion</p>
                    <p>en la parte inferir de la pantalla.</p>
                    <p>Este entrenamiento tiene audio, incluyendo un narrador y actores de voz.</p>
                    </div>
                    <span>3 of 100</span>
            </div>
            <div class ="item">
                <img src=" "/>  
                <div class="caption1"><h1>Audio</h1>
                    <p>Este entrenamiento tiene audio, incluyendo un narrador y actores de voz.</p>
                    <p>Pueden ver el guin de narracion seleccionado el boton de subtitulos en la barra de navegacion</p>
                    <p>en la parte inferir de la pantalla.</p>
                    <p>Este entrenamiento tiene audio, incluyendo un narrador y actores de voz.</p>
                    </div>
                    <span>4 of 100 </span>
            </div>
            <div class ="item">
                <img src=" "/>  
                <div class= "cuadro"></div>
                <div class="caption1"><h1>FINAL</h1>
                    <p>Felicidades por llegar al final.</p>
                    <p>Aqui se te otorgara tu certificado.</p>
                    </div>
                </div>
            </div>
        <div class="controls">
            <span class="play">Play</span>
            <span class="stop">Stop</span>
            <input type="checkbox" name="un-mute" id="un-mute">
            <label for="un-mute" class="unmute">
                <img src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Mute_Icon.svg" alt="Mute_Icon.svg" title="Mute icon">
            </label>
            <label for="un-mute" class="mute">
                <img src="http://upload.wikimedia.org/wikipedia/commons/2/21/Speaker_Icon.svg" alt="Speaker_Icon.svg" title="Unmute/speaker icon">
            </label>
        </div>
    </div>

1 respuesta 1

1

Para este caso, creo que la reproducción automática no va a dar los resultados esperados o va a complicar la lógica por tener que cambiar propiedades cada vez que inicies o pauses.

Ciertamente, no es tan fácil obtener la posición del elemento que se está mostrando, pero puedes "sacarle la vuelta" agregando una propiedad para actualizarla cada que haya cambios.

Los eventos de Owl Carousel incluyen la propiedad event.item.index con la posición (1 a total de elementos) del elemento que disparó el evento, envías como parámetro a una función donde controlas el tiempo y es lo que vas a usar cuando necesites esta posición, creando la propiedad personalizada owl.currentIndex = index;

Vas a tener una reproducción automática, pero controlada por ti mismo, cambiando el tiempo de espera entre cada elemento, de acuerdo a tus necesidades.

$(document).ready(function(){
    var imgItems = $('.item').length; // NUMERO DE SLIDES
    var imgPos = 1;
    var video = document.getElementById('myAudio');
    var owl = $('.owl-carousel');
    // Temporizador
    var owlTimer;
    owl.owlCarousel({
        loop: false,
        autoplay: false,
        items: 1,
        dots: false,
        animateOut: 'fadeOut',
        nav: true,
        startPosition: 1
    });
    
    // Aplicar tiempo a cada elemento
    function sliderTimeout(index) {
        // Establecer índice actual
        owl.currentIndex = index;
        // Eliminar temporizador actual
        clearTimeout(owlTimer);
        // Obtener elemento actual por índice, jQuery inicia con cero, por eso el -1
        let current = $('.owl-carousel .item').eq(index - 1);
        // Solo si no es el último elemento
        if(index < imgItems) {
            // Definir tiempo por defecto para todos los elementos
            let time = 3000;
            // Aquí puedes analizar el contenido del elemento actual
            // Para elegir audio y duración, cambiando el tiempo de espera
            // Por ejemplo: dar el doble de tiempo para el segundo elemento
            if(index == 2) {
                time = 6000;
            }
            owlTimer = setTimeout(function() {
                owl.trigger('next.owl.carousel');
            }, time);
        } else {
            // Es el último elemento, puede tener tiempo diferente
            setTimeout(function() {
                // Probablemente quieras usar otra función para terminar
                // Tal vez redirigir a otra página
            }, 5000);
        }
    }
    // Escuchar cambios
    owl.on('changed.owl.carousel', function(e) {
        // El índice se obtiene desde el evento
        sliderTimeout(e.item.index);
    });
    
    // Reactivar temporizador
    $('.play').on('click', function() {
        // Reanudar reproducción con el índice guardado previamente
        sliderTimeout(owl.currentIndex);
    });
    // Pausar reproducción
    $('.stop').on('click', function() {
        // Solo es necesario cancelar el temporizador
        clearTimeout(owlTimer);
    });

    // Iniciar reproducción
    sliderTimeout(1);

     /*
    // Esta función no es necesaria, el botón avanza automáticamente
    function nextSlider(){
        if(imgPos >= imgItems){
            imgPos = 1;
            owl.trigger('play.owl.autoplaySpeed',[60000]);
            owl.trigger('play.owl.autoplayTimeout',[60000]);
        }else if(imgPos >= imgItems){
            imgPos++;
        }
    }
    owl.trigger('refresh.owl.carousel');

    $('.mute').on('click', function(){
        myAudio.muted = true;

    });
    $('.unmute').on('click', function(){
        myAudio.muted = false;

    });

  
        //Objeto con referencia a la etiqueta audio     
        myAudio = document.getElementById("myAudio");
        //Objeto con referencia al boton play
        playBtn = document.getElementById("play");
        //Objeto con referencia al boton pause
        pauseBtn = document.getElementById("pause");
        muteBtn = document.getElementById("mute").muted;
    
    
        //Añadiendo funcionalidad a los botones del reproductor
        playBtn.addEventListener("click", play, true);
        pauseBtn.addEventListener("click", pause, true);
        muteBtn.addEventListener("click", muted);
    */
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="slider">
    <div class="owl-carousel">
        <div class ="slide slide1">
            <img src="img/d7e1725b3801fb6cdeb212884c893f79.jpg"/>   
            <div class="caption">COOPERATIVA VEGA REAL
                </div>
        </div>
        <div class= "item">
            <img src=" "/>  
            <div class="caption1" >
                <video id="myAudio" autoplay controls>
                    <source src="medios/2.mp4" type="video/mp4" >
                </video>
                </div>
            <span>1 of 100 </span>
        </div>
        <div class ="item">
            <img src=" "/>
            <div class="caption1"><h1>Sincronización</h1>
            <p>Este entrenamiento durara aproximadamente 45 minutos.</p>
            <p>Puede ver su progreso en la parte inferior de la pantalla</p>
            <p>Puede retroceder una pantalla seleccionando el boton "Atras" en la barra de navegacion.</p>
            <p>para continuar, seleccione el boton de flecha en la esquina inferior derecha de la pantalla.</p>
            <p>Cuando termine de escuchar el audio, solo debe esperar 5 segundos y se adelantara solo</p>
            <p>Si desea leer el texto, puede ponerlo en pausa</p>
            </div>
            <span>2 of 100 </span>
        </div>
        <div class ="item">
            <img src=" "/>  
            <div class="caption1"><h1>Audio</h1>
                <p>Este entrenamiento tiene audio, incluyendo un narrador y actores de voz.</p>
                <p>Pueden ver el guin de narracion seleccionado el boton de subtitulos en la barra de navegacion</p>
                <p>en la parte inferir de la pantalla.</p>
                <p>Este entrenamiento tiene audio, incluyendo un narrador y actores de voz.</p>
                </div>
                <span>3 of 100</span>
        </div>
        <div class ="item">
            <img src=" "/>  
            <div class="caption1"><h1>Audio</h1>
                <p>Este entrenamiento tiene audio, incluyendo un narrador y actores de voz.</p>
                <p>Pueden ver el guin de narracion seleccionado el boton de subtitulos en la barra de navegacion</p>
                <p>en la parte inferir de la pantalla.</p>
                <p>Este entrenamiento tiene audio, incluyendo un narrador y actores de voz.</p>
                </div>
                <span>4 of 100 </span>
        </div>
        <div class ="item">
            <img src=" "/>  
            <div class= "cuadro"></div>
            <div class="caption1"><h1>FINAL</h1>
                <p>Felicidades por llegar al final.</p>
                <p>Aqui se te otorgara tu certificado.</p>
                </div>
            </div>
        </div>
    <div class="controls">
        <span class="play">Play</span>
        <span class="stop">Stop</span>
        <input type="checkbox" name="un-mute" id="un-mute">
        <label for="un-mute" class="unmute">
            <img src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Mute_Icon.svg" alt="Mute_Icon.svg" title="Mute icon">
        </label>
        <label for="un-mute" class="mute">
            <img src="http://upload.wikimedia.org/wikipedia/commons/2/21/Speaker_Icon.svg" alt="Speaker_Icon.svg" title="Unmute/speaker icon">
        </label>
    </div>
</div>

2
  • Hola!!, muchísimas gracias por tu respuesta, la verdad si me ayudo un montón para lo que quería hacer, pero, crees que para lo de los audios o la narración de los slides, debería hacer un array y navegar en ellos? el 28 may. 2021 a las 13:06
  • @AlexanderCoronado, sí, creo que es conveniente un arreglo para acceder a los audios, ya tienes el índice y, en ese mismo arreglo, también puedes especificar la duración de cada slide.
    – Triby
    el 28 may. 2021 a las 16:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.