[Help]: slidesInView keeps returning undefined

[sepe14]

Summary

Hello! I'm trying to get the currently selected slide and to my understanding the docs says this is the way to do it:

  const [emblaRef, emblaApi] = useEmblaCarousel({ inViewThreshold: 1 });

  const logSlidesInView = useCallback((emblaApi: EmblaCarouselType) => {
    const current = emblaApi.slidesInView();
    console.log(current[0]);
    if (current[0]) {
      setSelected(current[0]);
    }
  }, []);
  useEffect(() => {
    if (emblaApi) emblaApi.on("slidesInView", logSlidesInView);
  }, [emblaApi, logSlidesInView]);```

(I'm synchroning some part of the ui with the carousel, that's why I need the useState)

However using the carousel I only got these results:

Sorry if it's a trivial question but I couldn't find many examples and discussions about this package.
Thank you!

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

[davidjerleke]

@sepe14 have you seen the lazy load example in the docs?

[sepe14]

@davidjerleke Thank you very much I've got it working! I should've checked the examples more thoroughly...