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>