I have a slider made with glide.js. It works well, but I need to move to index 2 when I click the second glide-bullet and to index 4 when I click the third one.
I've tried to change data-glide-dir="=1" by =2 and data-glide-dir="=2" by "=4" and it didn't work (when I click Material, the class .glide__bullet--active goes to Impact.
Anybody knows what else can I try? Thanks!
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>
Try with 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')
})
Maybe something like that