`slidesInView` is one select event behind

[vajkri]

Bug is related to

• [ ] embla-carousel (core package)
• [X] embla-carousel-react
• [ ] embla-carousel-autoplay
• [ ] embla-carousel-auto-height
• [ ] embla-carousel-class-names
• [ ] embla-carousel-docs (documentation website)

Embla Carousel version

• v6.2.0

Describe the bug

• slidesInView (and actually also slidesNotInView) seem to be one select event too late. Both with single and multiple items in view.

CodeSandbox

• https://codesandbox.io/s/confident-kilby-n5wcti?file=/src/App.tsx

Steps to reproduce

1. Go to line 52 in 'App.tsx'
2. Open console
3. Click on "Next" and/or "Prev" a couple of times
4. Observe, that slidesInView is one click behind

Expected behavior

• I'd like to have slidesInView in sync with what's actually in view.

Thanks in advance

[davidjerleke]

Hi @vajkri,

Thank you for your question. By default, the slidesInView method returns the slides in view at the current carousel scroll location when the method is called, not the target/destination. This is useful when you want fine grain control. For example, if you want to track slides in view as the carousel is scrolling, you can attach it to the scroll event. But I think you’re looking for the target parameter:

• Set the target parameter to true when you want to get the slides visible at the scroll destination instead of the current scroll location.

An example:

function logSlidesInView() {
  const slidesInView = embla.slidesInView(true); // <-- Pass true to the slidesInView method
  console.log(slidesInView);
}

embla.on('select', logSlidesInView);
embla.on('pointerUp', logSlidesInView);

Note that I added pointerUp event because if you have a carousel with dragFree enabled, dragging might not change the selected snap at all times, but it could change which slides are in view and not.

Let me know if it helps.

Best, David

[vajkri]

Perfect, thanks your for quick reply. Passing true solved it for me :-)

[michaelaltmann]

@davidjerleke This answer suggests that slidesInView takes a target argument that can be true or false. That does not seem to be in the current API. See https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel/src/components/EmblaCarousel.ts#L213