Este es un ejemplo de como implementar adecuadamente varios slider Owl Carousel 2 en la misma página sin que entren en conflicto.
La clave será asignar un Id único a cada slider y después realizar las llamadas desde jQuery a esos mismos Ids, como muestro en el siguiente código de ejemplo.
Podremos tener cuantos sliders queramos en la misma página repitiendo la lógica, asignándole un Id diferente por cada caso.
Ejemplo de implementación en Html
<div id="owl1" class="owl-carousel owl-theme"> <div class="item"> 1 </div> <div class="item"> 2 </div> </div> <div id="owl2" class="owl-carousel owl-theme"> <div class="item"> 1 </div> <div class="item"> 2 </div> </div>
Ejemplo de implementación en jQuery
<script> $('#owl1').owlCarousel({ items:1, singleItem: true, loop:true, autoPlay:true, autoPlayTimeout:2000 }); $('#owl2').owlCarousel({ items:1, singleItem: true, loop:true, autoPlay:true, autoPlayTimeout:2000 }); </script>
Si te ha sido de utilidad ¡deja un comentario!
Eres un maldito maquina, muchos frameworks no dejan usar varios carouseles o es dificil de modificar por eso me he pasado a owl 🙂
geniooo!!
Muchas gracias, eso era lo que buscaba
Mil gracias, eso era lo que buscaba