Variable slidesToScroll

[ravenaxiom]

Hey there,

Thanks for this fantastic carousel, it's been great to work with. I'm currently using the carousel for a project, but am running into an issue and wasn't sure if I'd missed an option somewhere.

I have a carousel with multiple fixed width slides (fixed at 200px width). The carousel is on a responsive site, so you see a different number of slides depending on screen size. For example, on mobile you can see only 1-2 items, while on larger desktops you can see up to 5.

When you click the 'next' button to scroll the carousel, it only scrolls 1 slide at a time. You can use the slidesToScroll API option to change the number of slides scrolled, but this option only appears to take a single integer value.

This means before rendering the carousel, I need to:

1. look at the window width
2. make an estimate as to how many slides to scroll
3. pass that number to the carousel.

If the screen size changes, I need to recalculate the visible size and then reInit() the carousel with that number.

Have I missed something? Is there a way of scrolling a visible page of elements built in?

Thanks for any help!

[davidjerleke]

Hi @ravenaxiom,

Thank you for your question. The slidesToScroll option will group slides into the given integer. It won't do any checks if the slides fit into the viewport or any other checks for that matter. So as you mention, you'll have to write that logic yourself if you want it to be handled automatically.

slidesToScroll is easier to use with relative slide sizes which basically means setting you slide sizes in %. Let's say you want to scroll 2 slides on desktop and 1 on mobile, you can do it like this:

.embla__slide {
  flex: 0 0 100%; /* Default slide covers 100% of the viewport */
}
@media (min-width: 768px) {
  .embla__slide {
    flex: 0 0 50%; /* Breakpoint SM slide covers 50% of the viewport */
  }
}

.embla:before {
  display: none;
  content: '{
    "slidesToScroll": 1 /* Scroll 1 slide as default */
  }';
}
@media (min-width: 768px) {
  .embla:before {
    content: '{
      "slidesToScroll": 2 /* Scroll 2 slides SM up */
    }';
  }
}

The example above is taken from the Breakpoints guide in the docs. But judging from your description:

I have a carousel with multiple fixed width slides (fixed at 200px width).

It seems like you prefer fixed slide sizes for your use case. Assuming all slides have the same width, you can solve it like so:

const options = { inViewThreshold: 1 }
const embla = EmblaCarousel(emblaNode, options)

When inViewThreshold is set to 1, it will tell Embla that it should only consider slides in view if the whole slide is visible in the carousel viewport. And the following utility function will re-initialize Embla by setting slidesToScroll to the number of visible slides in viewport:

const setSlidesToScrollToVisibleCount = (embla) => {
  return () => {
    const slidesToScroll = embla.slidesInView().length
    embla.reInit({ slidesToScroll })
  }
}

And how to use it:

const setSlidesToScroll = setSlidesToScrollToVisibleCount(embla)

embla.on('init', setSlidesToScroll)
embla.on('resize', setSlidesToScroll)

Let me know if it helps.

Best,
David

[ravenaxiom]

Hey David,

Thanks very much for this, the above code works great! 👍

Cheers

[davidjerleke]

I’m glad to hear that @ravenaxiom. Don’t forget to mark my answer as helpful (the circle with a check inside) if you think it solves your problem. That will help others looking to achieve the same thing as you want to achieve.

Best,
David

[davidjerleke]

Hi @ravenaxiom,

Just wanted to let you know that v7 has this feature. Usage:

const options = { slidesToScroll: 'auto' }

Best,
David