glidejs / glide

A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more
https://glidejs.com
MIT License
7.29k stars 772 forks source link

Issue with control button focus when changing direction of slides. #667

Open SiWhite opened 1 year ago

SiWhite commented 1 year ago

Hi and thanks for the awesome plugin. I am experiencing an edge case issue where if the user clicks too many times in one direction - e.g. we have 3 slides and they click the 'next' button 10 times - when they then click the 'prev' button, nothing happens and it takes an extra click for the slider to start moving in the opposite direction. Not a serious issue but wondering if you have any thoughts on how to mitigate this? A stripped-back example of my code is below, thanks in advance for any advice.

... 
const element = new Glide(slider, {
            type: 'slider',
            startAt: 0,
            gap: 20,
            perView: 2,
            peek: 1,
            rewind: false,
            bound: true,
            breakpoints: {
                820: {
                    perView: 1,
                },
            },
        });
 ...
...
<div class="glide">
    <div class="glide__track" data-glide-el="track">
        <ul class="glide__slides">
            <li>Slide 1</li>
            <li>Slide 2</li>
            <li>Slide 3</li>
        </ul>
    </div>
    <div class="glide__arrows" data-glide-el="controls">
        <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
           Prev
        </button>
        <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
           Next
        </button>
    </div>
</div>
...