[Help]: Is it possible to make multiple row slider?

[romanslonov]

Summary

Hello, first of all, thank you a lot for your hard work on this lib, it's super awesome!

I am playing around to build the multiple row carousel, but have no luck.

Any idea on how to implement this?

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[meirroth]

Hey @romanslonov, you can initiate as many carousels as you'd like, would this work for you?
https://stackblitz.com/edit/embla-carousel-nuxt-863?file=app.vue

[romanslonov]

No, I just need one carousel with 2 rows

[meirroth]

@romanslonov Just trying to understand your use case, why doesn't two carousel instances work?

[meirroth]

Ah, I see, you want slides to wrap around?

[davidjerleke]

@romanslonov you might want to read up on this discussion which is related to this I think:

• [Help]: Embla Carousel 2 row per slide item #816

You checked both the React and Vue package. Which one are you using?

---

Thanks @meirroth for helping out!

[romanslonov]

@davidjerleke Thank you a lot! I don't know how I couldn't find this discussion 🤯 My initial take was same as method 1, but thought there are better options. So I ended up with this:

const items = computed(() => {
  if (!props.data) return undefined;

  return props.data.reduce((acc, curr, index) => {
    if (index % 2 === 0) {
      acc.push([curr]);
    } else {
      acc[acc.length - 1].push(curr);
    }
    return acc;
  }, []);
});

<CarouselContent>
  <CarouselItem
    v-for="item in items"
    class="basis-4/5 min-[460px]:basis-[65%] min-[580px]:basis-[45%] md:basis-2/5 lg:basis-1/4"
  >
    <div class="space-y-4">
      <Card
        v-for="card in item"
        :title="card.title"
        :image="card.image"
      />
    </div>
  </CarouselItem>
</CarouselContent>

[davidjerleke]

@romanslonov I’m glad you got it sorted 🎉.