javascriptglidejs

Glide.js slider not pausing on last slide


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.


Solution

  • 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();
    }
    

    Reference