Displaying "empty" slides when the number of slides is not divisible by slidesToScroll #583

[lockr7]

Feature request is related to

• embla-carousel (core package)
• embla-carousel-react

Is your feature request related to an issue?

• Currently when I have slidesToScroll = 3 but only 5 slides (or any other combination, like slidesToScroll = 5 but only 8 slides), I get this behavior where it doesn't actually scroll 3 slides but only scrolls until the 5th slide is the last displayed

Describe the solution you'd like

• When I have slidesToScroll = 3 but only 5 slides (or any other combination, like slidesToScroll = 5 but only 8 slides), I want the first 3 slides to be visible and then on drag or on next button click, I want only the 4th and 5th slide to be visible with the 6th slot left empty/blank

Describe alternatives you've considered

• This may already be possible, but I couldn't figure it out. I tried changing containScroll but didn't seem to help.

[davidjerleke]

Hi @lockr7,

If I understand you correctly, you want to align the slides to the left edge of the viewport. You can try setting your options to:

const options = {
  containScroll: false, // allow leading and trailing space
  align: 'start', // align to start edge
  slidesToScroll: 3
}

Please note that you can set slidesToScroll to 'auto' and Embla will group your slides automatically based on how many slides that fit into the viewport. It may be of interest to you.

Best,
David

[davidjerleke]

@lockr7 have you seen my response?

[lockr7]

yes! it worked, thanks very much