canScrollNext does not stop soon enough if more than one slide is visible

[tordans]

Bug is related to

• embla-carousel (core package)
• embla-carousel-react
• embla-carousel-docs (documentation website)

Embla Carousel version

• v6.2.0

Describe the bug

Try using the slider at https://radwege-check.de/

Code: https://github.com/FixMyBerlin/fixmy.safetycheck/blob/develop/src/components/Homepage/Presets/PresetSlider.tsx

The issue – as far as I understand it – is, that canScrollNext does not handle the special case when more than one slide is visible at the same time.

I worked around it with this custom code for desktop. But that only seems to work well for the first tab of the sliders which has 6 slides. The one with 5 slides "over scrolls", which might be because my check does not look if the slide count is odd/even.

Expected behavior

I am looking for a way to use canScrollNext that will allow to disable the button once all available slides are visible to the user.

Screenshot

[davidjerleke]

Hi @tordans,

Thank you for your question.

The issue – as far as I understand it – is, that canScrollNext does not handle the special case when more than one slide is visible at the same time.

canScrollNext and canScrollPrev have nothing to do with what slides are in view or not. It is purely index based and will blindly follow the scroll snaps that Embla creates based on what options you pass to the carousel instance. If I understand you correctly, you're looking for the containScroll option:

Clear leading and trailing empty space that causes excessive scrolling. Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.

const [emblaRef, emblaApi] = useEmblaCarousel({
  containScroll: 'trimSnaps',
  // ...other options
})

On a side note: Please trigger the select function on reInit too:

emblaApi
  .on('select', onSelect)
  .on('reInit', onSelect) // <-- Add this

Let me know if this is what you want to achieve.

Best, David

[davidjerleke]

Hi @tordans,

Have you had the chance to read my response?

Best, David

[davidjerleke]

I'm closing this as resolved due to lack of response. Feel free to reopen this if the provided solutions wasn't what you were looking for. If that's the case, please provide clear instructions of what you want to achieve.