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?

[arienzIT]

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

[gerardnico]

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

It works on 3.5.2, to move perView:

<div data-glide-el="controls">
  <button data-glide-dir="|<">Start</button>
  <button data-glide-dir="|>">End</button>
</div>

[eshimischi]

But what about pattern when

<button class="glide__bullet" data-glide-dir="=0"></button> 

<button class="glide__bullet" data-glide-dir="=2"></button>

<button class="glide__bullet" data-glide-dir="=4"></button>

PS: second bullet is inactive and we slide to the third :(

[gerardnico]

You can check the code by yourself. It's here

This pattern is explained in the doc - 2 means 3 because this is a zerobase list.

[CaitlinWeb]

Great to see this was implemented as one of my projects was using a hacky solution for this 🎉 I didn't know it was possible with newer versions.

@jedrzejchalubek Could you add the pagination value (data-glide-dir="|>" or data-glide-dir="|<") to the documentation on Controls?

[gerardnico]

There is already a pr from one year ago to approve ;)

glidejs/docs#11

[samimsu]

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

It works on 3.5.2, to move perView:

<div data-glide-el="controls">
  <button data-glide-dir="|<">Start</button>
  <button data-glide-dir="|>">End</button>
</div>

Doesn't work properly if perView is a decimal such as 3.5

[nobel-512]

Schema value of the data-glide-dir attribute must be in special format:

> Move one forward
< Move one backward
={i} Go to zero-based {i} slide (eq. '=1', will go to second slide)
>> Rewinds to the end (last slide)
<< Rewinds to the start (first slide)

Coped from the offical docs at controls section:
https://glidejs.com/docs/setup/#controls