[Help]: slidesInView is one select event behind

[xucxichcao]

Summary

• slidesInView (and actually also slidesNotInView) seem to be one select event too late. Both with single and multiple items in view.
  I saw the comment under this issue but the argument are not in current API anymore. See https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel/src/components/EmblaCarousel.ts#L202

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

No response

[davidjerleke]

Thanks for your question @xucxichcao,

Since Embla transitioned to Intersection Observer under the hood, this would be the best way to track slides in and not in view.

[xucxichcao]

Hi, because this event runs twice (when one slides out and one slides in), I tried the select in order to have the event run only once.
I managed to set the threshold and it still runs twice. Do you have any suggestions?
I managed to use another method for my use-case but having this problem (for me) solved will be better in my future use.

[davidjerleke]

Hi, because this event runs twice (when one slides out and one slides in)

Yes that’s by design. This is because when slides both enter view or leave view, the value of slidesInView has to change. Example:

• Slide 1 and 2 are in view —> [0, 1]
• User scrolls and slide 1 leaves view —> [1]
• User scrolls more and slide 3 enters view —> [1, 2]

What are you trying to build/achieve with slidesInView?

[xucxichcao]

Yes, I understood the concepts.
I was trying to make GSAP interact with the leaving slides. However, I realized I shouldn't do that with slidesInView so I added the script inside the next/prev button (as the slides are not loop: true). Thank you for your on time response. I very appreciated that.

[davidjerleke]

@xucxichcao thanks for clarifying. So this discussion is resolved then I guess? May I close it?

[xucxichcao]

@davidjerleke yes please. Thank you!