javascript - tutorial - owl carousel responsive
Owl Carousel no se reproducirá automáticamente (6)
Estoy construyendo un sitio de wordpress con un carrusel JQuery usando el plugin Owl Carousel 2 JQuery. He usado este carrusel con éxito anteriormente, pero estoy perplejo con este y necesito su ayuda. Espero que otras personas que puedan tener el mismo problema puedan hacer referencia a esta solución con la que todos ayuden.
El carrusel se cargará, las imágenes se mostrarán y la mayoría de las opciones que he probado están funcionando, pero la reproducción automática no cargará la siguiente imagen después de 5 segundos. Todos los archivos están en su lugar y se cargan correctamente, como se verificó con el inspector de red Firebug. ¡Gracias por su ayuda / sugerencias por adelantado!
customjs.js:
$(document).ready(function(){
var owl = $(".owl-carousel");
owl.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true
});
});
HTML:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="owl/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="customjs.js"></script>
</head>
<body>
<div id="feature" class="full">
<!-- FEATURE ROTATOR -->
<div id="home-feature" class="owl-carousel owl-theme">
<div class="item">
<a href="#">
<img src="/images/home/rotator1.jpg"
alt="Feature 1"/>
</a>
</div>
<div class="item">
<a href="#">
<img src="/images/home/rotator2.jpg"
alt="Feature 2"/>
</a>
</div>
<div class="item">
<a href="#">
<img src="/images/home/rotator3.jpg"
alt="Feature 3"/>
</a>
</div>
<div class="item">
<a href="#">
<img src="/images/home/rotator4.jpg"
alt="Feature 4"/>
</a>
</div>
</div>
</div>
</body>
También he intentado owl.trigger(''owl.play'',6000); dentro de la función document.ready por una sugerencia en este hilo stackoverflow en vano.
Es una solución estúpida, pero tal vez alguien pueda enfrentarlo.
He trabajado en código de otros, así que llama a owlCarousel () con "autoPlay: falso", en uno de los archivos javascript incluidos. Lo llamé después de llamar a la función owlCarousel () con "autoPlay: true". Pero no funciona y el navegador tampoco da ninguna notificación en la consola si llama dos veces la misma función.
Esto es lo que debe hacer, cuando llame al owl-demo / owl-carrusel que necesita agregar
| reproducción automática: 3000 | (----- 3000 = rotación de 3 segundos entre imágenes.
No necesitas tocar nada más.
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
navigation : false,
singleItem : true,
autoPlay: 3000,
transitionStyle : "fadeUp"
});
});
Lo averigué. Wow, no puedo creer que me haya perdido eso. Tuvo que incluir el autoplay.js en la sección
<script src="owl/js/owl.autoplay.js"></script>
Si lo descarga de la carpeta Github ( OwlCarousel2 src ), obtendrá archivos separados y deberá incluirlo de forma separada en su HTML.
Si lo descargas desde el sitio web de Owl Carousel owl.autoplay.js está incluido en el archivo owl.carousel.js .
También me enfrenté a un problema similar. Luego busqué y encontré una solución para que la autoplay se vuelva a corregir como autoPlay con p como mayúscula. Y funcionó para mí.
owl.owlCarousel({
items:4,
nav:true,
loop:true,
autoWidth:true,
itemsTablet: [768,1]
});
Primero, debe llamar al owl.autoplay.js.
Este código funciona para mí:
owl.trigger(''play.owl.autoplay'',[1000]);