Embla-carousel: Multiple Items Per Slide API

[cliffordfajardo]

Feature request is related to

• [X] The Vanilla JavaScript version
• [ ] The React version
• [X] The Embla Carousel core (all versions)
• [ ] Documentation website
• [ ] Other

Is your feature request related to an issue?

• the ability to have multiple items per cell was mention in #120 (ignoring the windowing / virtual scrolling aspects of that discussion)

Describe the solution you'd like

I think a lot of people would find it convenient to have the option to group multiple items per slide.
With the current API it is possible to have multiple items per slide like this:

.embla { overflow: hidden;}
.embla__container { display: flex;}
.embla__slide {
  position: relative;
  flex: 0 0 25%;
}

however, you are often left with huge space gaps in between the items. From a code standpoint, I get why there's the gap, its due to the flex-basis value.

https://user-images.githubusercontent.com/6743796/113498552-c6836c00-94c2-11eb-9bea-5f25e5fdb866.mp4

I believe that the majority of people who want multiple items per slides probably don't want those gaps and instead what they are looking for is the concept of multiple items per slide like this:

https://user-images.githubusercontent.com/6743796/113498663-d8194380-94c3-11eb-918d-ef4d39267209.mp4

Being able to pass an option to decide how many items per slide to show. (2,3,4, N..) example

Codesandbox

I have a simple demo using Embla of the multiple items per slide concept ^^

• https://codesandbox.io/s/eager-snowflake-7zrpl?file=/src/App.tsx

https://user-images.githubusercontent.com/6743796/113498269-44924380-94c0-11eb-80a8-117f63078d44.mp4

A more robust solution would be something similar to Flickity's groupCells option for its carousel and tighter integration with the events and methods Embla uses under the hood

[davidcetinkaya]

Hi Clifford (@cliffordfajardo),

It seems like you might have missed the slidesToScroll option that behaves just like the Flickity's groupCells option. From the Embla Carousel docs:

slidesToScroll

Type: number
Default: 1

Group slides together. Drag interactions, dot navigation, and previous/next buttons are mapped to group slides into the given number.

Looking at the CodeSandbox you provided in the following issue your created (#171), you're creating your own logic for this. And the reason why you can't scroll to the last slide is because each group you create is wider than the viewport.

About the slide sizes and empty spaces, this is related to your CSS?

flex: 0 0 25%;
````

This tells each slide to be 1/4 of the carousel viewport. You should either make the content inside the slides stretch so it covers the whole slide, or just let the content decide the slide sizes like so:

```css
flex: 0 0 auto;

Please take a moment to read the Slide Sizes guide in the docs.

Let me know if this helps.

Best,
David

[cliffordfajardo]

Thanks David, I will take a look at this shortly and try again. Thanks for the courteous response, I know how it can be being a maintainer and working through the back and forth with folks

[davidcetinkaya]

Hi Clifford (@cliffordfajardo),

No worries. I’ll consider creating a guide about grouping slides when possible. Maybe that will make it more clear for users looking for this feature.

Have you had the chance to try this out yet?

Best,
David

[cliffordfajardo]

Yeah I just did this morning 🎉 I was able to achieve what I needed by digging more into the API

[davidcetinkaya]

Thanks for your response @cliffordfajardo. Happy to hear that. Is it safe to assume that the related issue #171 you opened is resolved too?

Best,
David