Multiple Items Per Slide API

Feature request is related to

• The Vanilla JavaScript version
• The React version
• 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

[cliffordfajardo]

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

[davidjerleke]

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