Tengo un control deslizante hecho con glide.js. Funciona bien, pero necesito moverme al índice 2 cuando hago clic en la segunda viñeta deslizante y al índice 4 cuando hago clic en el tercero.
Intenté cambiar data-glide-dir="=1" por =2 y data-glide-dir="=2" por "=4" y no funcionó (cuando hago clic en Material, la clase . glide__bullet--active va a Impact.
Alguien sabe que mas puedo probar? ¡Gracias!
window.addEventListener('load', function(){ new Glide(document.getElementById('glider-2'), { type: 'carousel', perView: 2, perTouch: 2, gap: 15, breakpoints: { 1024: { perView: 2 }, 750: { perView: 1 } } }).mount(); }); .glide__bullets { display: flex; justify-content: center; padding: 0 20px 30px 20px; margin: 0 auto; max-width: 90%; } .glide__bullet { position: relative; display: flex; font-size: 18px; justify-content: center; flex: 0 1 calc(100% / 3); max-width: calc(100% / 3); padding: 0; border: 0; overflow: hidden; color: #000; height: 40px; background-color: transparent; box-shadow: inset 0px -4px 0px 0px lightgrey; } .glide__bullet::before { content: ""; position: absolute; bottom: 0; width: 100%; height: 4px; display: block; opacity: 0; transform: translateX(-100%); background-color: #000; transition: transform 5s; } .glide__bullet--active::before { opacity: 1; transform: translateX(0); } <div class="glide" id="glider-2"> <div class="glide__bullets" data-glide-el="controls[nav]"> <button class="glide__bullet" data-glide-dir="=0">Solar</button> <button class="glide__bullet" data-glide-dir="=1">Material</button> <button class="glide__bullet" data-glide-dir="=2">Impact</button> </div> <div class="glide__track" data-glide-el="track"> <ul class="glide__slides"> <li>Slide 1</li> <li> Slide 2</li> <li>Slide 3</li> <li>Slide 4</li> <li>Slide 5</li> <li>Slide 6</li> </ul> </div> </div>
Prueba con yourGlide.go('') \
https://glidejs.com/docs/api/#go-pattern-
var material = document.querySelector('#material') var impact = document.querySelector('#impact') material.addEventListener('click', function () { yourGlide.go('=1') }) impact.addEventListener('click', function () { yourGlide.go('=3') })Tal vez algo así