[Help]: I can't figure out why the Next button scrolls through all the steps at once

[SumoTTo]

Summary

Hello.

I'm trying to make a carousel that would have one row on wide screens, and 3 rows on narrow screens.
I did this using Grid.
Everything is fine, except that the next button behaves strangely.
It scrolls through all the steps at a time on the narrow screen, and one at a time on the wide screen.
In this case, the prev button always scrolls one step.

For greater understanding, I added another row of buttons in the example, and I process the next button myself, which scrolls as I intended.
But I would like to use native scrollNext().

I think something in my styles is preventing scrollNext() from working correctly, but I don't understand what...

Please help me understand what the problem is.

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-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

https://codesandbox.io/p/sandbox/gracious-jones-tcdhps

[davidjerleke]

Hi @SumoTTo,

Please read the following discussions. They should hold the information you need to solve the problem:

• [Help]: Embla Carousel 2 row per slide item #816
• [Help]: Is it possible to make multiple row slider? #863

[SumoTTo]

Hi @davidjerleke

Thank you for your work and for your answer!

What you provided seems a little different to me. Since I can’t wrap the slides in a column, because on wide screens it goes in one row.
You can, of course, dynamically rearrange and wrap the slides in columns, but I wanted to avoid changing the DOM.

Overall I solved my problem. But I thought that maybe there was a better way.

For now. I redefined scrollNext and scrollPrev, so that on narrow screens it will not scroll to the next slide, but I will find the next slide with a different scrollProgress and scroll to it by index.

const originalScrollNext = emblaApi.scrollNext;

emblaApi.scrollNext = function () {
	if (
		fixOnWidth &&
		emblaApi.rootNode().getBoundingClientRect().width < fixOnWidth
	) {
		emblaApi.scrollTo( findNextIndex( emblaApi ) );
	} else {
		originalScrollNext();
	}
};

Overall it works well, even with the Autoplay plugin.

So if there is no more correct way, then this issue should probably be closed as resolved.

[SumoTTo]

Here is an example with a solution to this problem

https://codesandbox.io/p/sandbox/embla-carousel-multi-rows-corrected-example-pvk3x5

[davidjerleke]

@SumoTTo thanks for sharing your solution, it might help other developers 👍🏻.

With that said, I want to be clear and say that this isn’t a problem with the library itself. It’s impossible for the Embla library to know what you intend to do or not when using CSS grid as there are endless of combinations of layouts.

Most devs that use Embla also use a reactive library like React, Svelte, Vue etc. With a reactive library, it’s really simple to change the HTML structure based on breakpoints and solve these kind of challenges. So there are mainly two solutions to this:

1. Change the HTML structure based on breakpoints. It’s a breeze to do with a reactive library.

2. Change the logic of your scrollNext function and work with indexes - Which will be cumbersome with some options enabled like loop and similar, because they add complexity to how the scroll snaps are calculated.

Best,
David