slidesToScroll

The number of slides to scroll when the user navigates to the previous or next page by either swiping, dragging or using the previous and next navigation buttons.

default

slidesToScroll: 1

Example: slidesToScroll: 1

new BlazeSlider(el, {
  all: {
    slidesToShow: 3,
    slidesToScroll: 1, // ( default )
  },
})

1

2

3

4

5

6

Example: slidesToScroll: 3

new BlazeSlider(el, {
  all: {
    slidesToShow: 3,
    slidesToScroll: 3,
  },
})

1

2

3

4

5

6

note

Notice how the number of pages decreased compared to the previous example, because this slider is scrolling 3 slides at a time.

---

Edge Cases

If there are not enough slides to scroll, the Blaze slider will dynamically reduce the slidesToScroll value. Let's take a look at the slider with 7 slides and slidesToShow: 3

Example (loop enabled)

if you go to the next page on the last page (to go to the first page), only 1 slide is scrolled instead of 3

new BlazeSlider(el, {
  all: {
    slidesToShow: 3,
    slidesToScroll: 3,
  },
})

1

2

3

4

5

6

7

Example (loop disabled)

if you scroll next on the second page, only 1 slide is scrolled instead of 3

new BlazeSlider(el, {
  all: {
    loop: false,
    slidesToShow: 3,
    slidesToScroll: 3,
  },
})

1

2

3

4

5

6

7