0
251
ViewsEncontrar el índice de un carrusel de búhos dependiendo de dónde se encuentre el usuario en el carrusel
como se mencionó anteriormente, ¿hay alguna forma de obtener el índice del carrusel?
Quiero cambiar el texto (indicado en la flecha roja) según la posición en la que se encuentra el usuario (flecha azul). yo
·
Juan Pablo Isaza
1 answers
Answer question0
Puede usar eventos de carrusel según el documento . Por favor, intente con el siguiente código.
var owl; $(document).ready(function(){ owl = $(".owl-carousel").owlCarousel({ autoplay: false, autoplaySpeed: 300, loop: false, navSpeed: 300, items: 1, margin: 2 }); owl.on('changed.owl.carousel', function(e) { $('#continue-btn').html('Continue ' + e.item.index); }); }); body { margin: 0; padding: 0; } .owl-carousel .item { height: 120px; background: #4DC7A0; padding: 1rem; list-style: none; margin: 10px; text-align: center; color: white; font-size: 20px; line-height: 120px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"></script> <div class="owl-carousel"> <div class="item"> slide1 </div> <div class="item"> slide2 </div> <div class="item"> slide3 </div> <div class="item"> slide4 </div> <div class="item"> slide5 </div> <div class="item"> slide6 </div> <div class="item"> slide7 </div> <div class="item"> slide8 </div> <div class="item"> slide9 </div> </div> <button id="continue-btn"> Continue </button>
·
Juan Pablo Isaza
Report
Answer question