What i am trying to achieve, is a basic slideshow that starts, gets to the last slide and stops. I am using Glide.js as it is so small and is really awesome however, with the below code it does not actually pause and the slide spins round back to the beginning again.
/**
* Homepage Slideshow
*/
if(document.querySelector('.glide')) {
var item_length = document.querySelectorAll('.glide__slide').length - 1;
let glide = new Glide('.glide', {
type: 'slider',
startAt: 0,
perView: 1,
autoplay: 6000,
hoverpause: true,
});
glide.on('move', (e) => {
if(glide.index == item_length) {
console.log(glide.index, item_length);
glide.pause();
}
});
glide.mount();
}
I am getting the console.log
out which is telling me 5 5
meaning I am on the glide.index
at the 5th slide and the item_length
is 5. So the glide.pause()
should work. Any help would be greatly appreciated I have been scratching my head for ages on this. I have tried run
and other events instead of move and still no success.
Try setting the rewind option to false:
/**
* Homepage Slideshow
*/
if(document.querySelector('.glide')) {
var item_length = document.querySelectorAll('.glide__slide').length - 1;
let glide = new Glide('.glide', {
type: 'slider',
startAt: 0,
perView: 1,
autoplay: 6000,
hoverpause: true,
rewind: false,
});
glide.mount();
}