Glide: How can i make 2 or more slides move when i click the prev or next controls

[Rilliano]

How can i make 2 or more slides move when i click the prev or next controls buttons?
Currently the previous and next buttons only move one slide at a time.

[msassmann]

Same here. Is it possible?

[szympol]

I have bumped into a similar issue. I would like to make 3 slide leap while autoplay is set on true. Here is an example: https://codepen.io/szympol/pen/ZZwVjx

It is now possible to make a desirable move by clicking one of the dots thanks to data-glide-dir="=0, 1, 2" etc. However, it still does not work properly with dragging and autoplay (please change autoplay value to true to see what I mean). The active class of a dot seems not to follow a change correctly as well.

Is there any way to change the glider's number of moves?

[lucari94]

don't think this is the cleanest solution, and I still didn't implement it to work with different values for different breakpoints, but this seems to work for me:

        const step = 2
        slider.on('run.before', (evt) => {
            evt.steps = evt.direction === '>' ? -step : step
        })

[andre-lima]

@lucari94 This works well but it would be cool to have the step following the responsive settings, so we could have scrolling by the number of items displayed at each moment.

[andre-lima]

I managed to do what I wanted like this:

    this.carousel.on('run.before', evt => {
        const scrollSteps = this.carousel.settings.perView;
        evt.steps = evt.direction === '>' ? -scrollSteps : scrollSteps;
    });

It manages the changes of breakpoint automatically, if you have set different perView values per breakpoints.

[sophanox]

I fixed this by setting:

var viewSize = Glide.settings.perView;

in _calculate_ on line 981 of glide.js.

[vadkart]

You can use pipe | in data-glide-dir HTML attribute and perSwipe: '|' option in v3.4.1, e.g.:

<div class="glide">
  <div data-glide-el="controls">
    <button data-glide-dir="|<">prev</button>
    <button data-glide-dir="|>">next</button>
  </div>
</div>

const glide = new Glide('.glide', {
  type: 'carousel',
  perView: 3,
  perSwipe: '|',
}).mount();

Codepen: https://codepen.io/vadkart/pen/VwYROJr
Note: Make sure that you are using latest build just clone Glide project and run npm run build. Currently in glide/dist/glide.min.js v3.3.0.

[aldoAGG]

I'm running v3.4.1 but get an error code when I tried implementing your example. When using your code, which does work in the codepen, I get the following error:

[Glide warn]: Invalid direction pattern [|>] has been used

I'm uncertain what could be causing this issue, as I copied your code just to make sure it wasn't something I did incorrectly, but I still get that error. Thanks in advance for any guidance.

[vadkart]

I'm running v3.4.1 but get an error code when I tried implementing your example. When using your code, which does work in the codepen, I get the following error:

[Glide warn]: Invalid direction pattern [|>] has been used

I'm uncertain what could be causing this issue, as I copied your code just to make sure it wasn't something I did incorrectly, but I still get that error. Thanks in advance for any guidance.

Unfortunately, it doesn't work anymore in v3.4.1.

[cihangir-mercan]

I managed to do what I wanted like this:

    this.carousel.on('run.before', evt => {
        const scrollSteps = this.carousel.settings.perView;
        evt.steps = evt.direction === '>' ? -scrollSteps : scrollSteps;
    });

It manages the changes of breakpoint automatically, if you have set different perView values per breakpoints.

If someone does not want bullets to be affected from this, use this:

glide.on('run.before', evt => {
        const scrollSteps = 3;
        if (evt.direction === '>') {
            evt.steps = -scrollSteps;
        } else if (evt.direction === '<') {
            evt.steps = scrollSteps;
        }
    });