Glide: Scroll multiple slides

[tiagomatosweb]

Hi all,
Is there any way to slide multiple slides?
I currently have 4 slides set in perView. When I hit next / prev arrow I would like to scroll 4 slides instead of just 1.

I did not find this options so far...

Thanks

[ghost]

I found this go(pattern) in the docs for the api. Maybe this could work for a custom solution?
Something like:

const glide = new Glide('.selector', {perView: 3}).mount();
const perView = glide.settings.perView;

for (i = 0; i < perView; i++) {
    glide.go('>');
}

Add that to a click listener on your glide control elements. I haven't tested it but it might be a good starting point.

There is a feature request in #201 for the same functionality though.

[tiagomatosweb]

We decided to wait for the right feature rather than make something hackie haha! tks.

[Kraysik]

I found this go(pattern) in the docs for the api. Maybe this could work for a custom solution?
Something like:

const glide = new Glide('.selector', {perView: 3}).mount();
const perView = glide.settings.perView;

for (i = 0; i < perView; i++) {
  glide.go('>');
}

Add that to a click listener on your glide control elements. I haven't tested it but it might be a good starting point.

There is a feature request in #201 for the same functionality though.

Hi! I tried your code and it isn't work for me. In other things, it led me to another path that worked:

let glide = new Glide('#feedback-slider', {
    type: 'carousel',
    startAt: 0,
    perView: 3,
    gap: 20,
});


let leftArrow = document.querySelector('.feedback-arrow-left');
let rightArrow = document.querySelector('.feedback-arrow-right');
let activeSlide = glide.index;
let sliderIndexesLength = document.querySelectorAll('#feedback-slider .glide__slide').length - 1;


leftArrow.addEventListener('click', function (event) {
    activeSlide = glide.index;
    let prevSlide = activeSlide - 3;

    if (prevSlide < 0) {
        glide.go(`=${sliderIndexesLength-2}`)
    } else {
        glide.go(`=${prevSlide}`);
    }
});

rightArrow.addEventListener('click', function (event) {
    activeSlide = glide.index;
    let nextSlide = activeSlide + 3;
    if (nextSlide >= sliderIndexesLength) {
        glide.go(`=0`);
    } else {
        glide.go(`=${nextSlide}`);
    }
});

glide.mount({ Controls, Breakpoints });

[ghost]

yeah, my code was more a proof of concept than an actual solution 😅 I'm glad someone else put the pieces together though!

[xfra35]

Hi guys, this is actually possible, but not documented. I had to dig into the code to figure it out:

<div data-glide-el="controls" class="glide__arrows">
  <button class="glide__arrow glide__arrow--prev" data-glide-dir="|<">
    move perView slides backwards
  </button>
  <button class="glide__arrow glide__arrow--next" data-glide-dir="|>">
    move perView slides forwards
  </button>
</div>

[xfra35]

Judging from the test suite, it seems that there are actually 6 valid direction patterns:

• > : next slide
• < : previous slide
• |>: next perView slides
• |<: previous perView slides
• >>: last slide
• <<: first slide

[mikkelrom]

Judging from the test suite, it seems that there are actually 6 valid direction patterns:

• > : next slide
• < : previous slide
• |>: next perView slides
• |<: previous perView slides
• >>: last slide
• <<: first slide

They seem to only appear in the test-suite, and actually not being used (as far as I can see).
Also when using them, I get [Glide warn]: Invalid direction pattern [|>] has been used.

From the source it seems like they're not implemented, unfortunately 😞 https://github.com/glidejs/glide/blob/30978df4bd405ddc186be2db46b3c3a72200a656/src/components/direction.js#L5-L9

[xfra35]

No they're here. See:
https://github.com/glidejs/glide/blob/e02641f22ef746939fb5fa5ae94fc3162b6a66a6/src/components/run.js#L97
https://github.com/glidejs/glide/blob/e02641f22ef746939fb5fa5ae94fc3162b6a66a6/src/components/run.js#L159

They've been introduced in PR https://github.com/glidejs/glide/pull/327 and the tests have been introduced in https://github.com/glidejs/glide/pull/327/commits/7f508b565d4e18f4338697da59e1eb58bc87fd80.

They're also present in https://github.com/glidejs/glide/blob/master/dist/glide.js which is the version that I'm using.

The only thing that could explain your error is that in https://github.com/glidejs/glide/releases, we can see that release 3.4.0 (which introduces this feature) has been reverted in 3.4.1.

So in short, use 3.4.0 or dist/glide.js and you'll be good.

[mikkelrom]

@xfra35 you're totally right! I rolled back to 3.4.0 from 3.4.1, and now it works 👍
Thanks a lot 🙏

[jennicar]

Would love if you guys continued to support this feature! I also rolled back from 3.4.1 to 3.4.0 to use this feature.

[KYRY001]

Great, thanks. But can we expect this feature in next releases?

[silasbaur]

Is this still in the process of being fixed?