Glide: Drag/Swipe has intermittent failing/missing events

[lifeinchords]

First - I appreciate your effort in making this awesome library, and a great DevExperience with clear + well designed docs. :) I searched for existing issues but couldn't find one bc I'm not sure how to best describe this

See GIF and my config below... basically - if I navigate slides slowly, all is well. When I go faster, by dragging and swiping during animations, things fall out of sync, and it turns into a feedback loop where Im trying to "catch up" to what it's doing. Eventually I lose my mental model and go back to the slow one-by-one approach. That's reasonable for me as a developer, but I expect person would be frustrated.

Am I missing how to set this up in a better way? if so, by what method:

• using some combination of params
• adding custom logic via existing hooks? pseudocode example: write a function inside the animating function, which listens for new drags/taps and uses a que maybe to smartly modify/extend the animation?
• is this already a new feature request?
• just not possible?

any thoughts greatly appreciated!
~s

PS Im using animaton and transition interchangeably here, as I don't understand all of the library's inner workings. If it's relevant please let me know.

---

js

                new Glide(el0, 
                    {
                        // bpoints should match _mq.scss
                        // 1280 +
                        type: 'carousel',
                        gap: 32,
                        perView: 3,
                        focusAt: 'center',
                        animationDuration: 250,
                        peek: { before: 100, after: 100 },
                        dragThreshold: false,
                        perTouch: 2,
                        breakpoints: { 

                            // 1031 to 1200
                            1200: {
                                perView: 3,
                                gap: 16,
                                peek: { before: 32, after: 32 },
                                dragThreshold: false
                            },

                            // 861 to 1030
                            1030: {
                                perView: 2,
                                gap: 16,
                                peek: { before: 50, after: 50 },
                                dragThreshold: 1,
                                swipeThreshold: 1
                            },

                            // 651 to 860 
                            860: {
                                perView: 1,
                                gap: 16,
                                peek: { before: 50, after: 50 },
                                dragThreshold: true,
                                dragThreshold: 1,
                                swipeThreshold: 1
                            },

                            // up to 650 
                            650: {
                                perView: 1,
                                gap: 0,
                                peek: 0,
                                dragThreshold: true,
                                dragThreshold: 1,
                                swipeThreshold: 1
                            }
                        }
                    }
                ).mount()

---

scss

.glide__track {
    overflow: visible;
}

.glide__slides {
    height: 70vh;
    @include mq('md') { height: 400px; }
    @include mq('lg') { height: 400px; }
    @include mq('xl') { height: 350px; }
    @include mq('xxl') { height: 450px; }

    overflow: visible;
}

/* 
    $breakpoints: (
        "xxs":  1px,
        "xs":   400px,
        "sm":   480px,
        "md":   650px,
        "lg":   860px,
        "xl":   1030px,
        "xxl":  1200px,
        "xxxl": 1600px
    );
 */

.glide__slide {
    opacity: 0.6;
    background-size: cover;
    background-position: center center;
    transition: opacity 0.1s ease-in-out;
}

.glide__slide--active {
    opacity: 1 !important;
}

.glide__slide:nth-of-type(1){ background-image: url('.././images/photos/_MG_5563.jpg'); }
.glide__slide:nth-of-type(2){ background-image: url('.././images/photos/IMG_1243--1800.jpg');   }
.glide__slide:nth-of-type(3){ background-image: url('.././images/photos/_MG_5625.jpg'); }
.glide__slide:nth-of-type(4){ background-image: url('.././images/photos/_MP_6321--1600.jpg');
.
.
.
etc

[marcwieland95]

@lifeinchords You're right. I still leave it open because it's quite important and my issue shows that even on the documentation page the issue is there.

[jedrzejchalubek]

Fixed with #330

[ccsantos23]

@jedrzejchalubek I'm still seeing this issue (I'm on 3.4.1), when I have animationDuration: 4000 paired with autoplay: 2000 for a continuous ticker. When the animationDuration is pushed that high, the clicks and swipes are ignored until the animation ends. You can see it on https://glidejs.com/docs/options/#animationduration.