0
157
ViewsOwl Carousel 2: agregue título, haga clic y muévase al elemento en consecuencia
Estoy usando Owl Carousel 2 , centro. Necesito ayuda para algo como se muestra en la imagen. Básicamente tengo 6 artículos, 2 de ellos en la misma categoría
- Título 1: 1 y 1a
- Título 2: 2 y 2a
- Título 3: 3 y 3a
Al hacer clic en "Título 1", se moverá a 1, pero no a 1a, al hacer clic en "Título 2" se moverá a 2 y así sucesivamente.
Espero que alguno de ustedes me pueda dar algún consejo. ¡Gracias!
$(document).ready(function($) { $('.loop').owlCarousel({ center: true, items: 2, loop: true, margin: 10, nav: true, responsive: { 600: { items: 5 } } }); }); h4{ border: 1px solid black; text-align: center; } <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/> <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script> <a href="#" class="title1">Title 1</a> <a href="#" class="title2">TItle 2</a> <a href="#" class="title3">TItle 3</a> <div class="loop owl-carousel owl-theme"> <div class="item"> <h4>1</h4> </div> <div class="item"> <h4>1a</h4> </div> <div class="item"> <h4>2</h4> </div> <div class="item"> <h4>2a</h4> </div> <div class="item"> <h4>3a</h4> </div> <div class="item"> <h4>3</h4> </div> </div>
·
Juan Pablo Isaza
1 answers
Answer question0
Cambie el código de los artículos en su carrusel de esta manera:
<div class="loop owl-carousel owl-theme"> <div class="item" data-hash="one"> <h4>1</h4> </div> <div class="item"> <h4>1a</h4> </div> <div class="item" data-hash="two"> <h4>2</h4> </div> <div class="item"> <h4>2a</h4> </div> <div class="item"> <h4>3a</h4> </div> <div class="item" data-hash="three"> <h4>3</h4> </div> </div>Los títulos cambian de esta manera:
<a href="#one" class="title1">Title 1</a> <a href="#two" class="title2">TItle 2</a> <a href="#three" class="title3">TItle 3</a>Y la inicialización del carrusel de esta manera:
$(document).ready(function($) { $('.loop').owlCarousel({ center: true, items: 2, loop: true, margin: 10, nav: true, URLhashListener: true, //1. this string added startPosition: 'URLHash', //2. this string added responsive: { 600: { items: 5 } } }); });Ver más detalles en los documentos oficiales: https://owlcarousel2.github.io/OwlCarousel2/demos/urlhashnav
·
Juan Pablo Isaza
Report
Answer question