[Help]: Carousel item disappears with loop:true and the last index just gone when it's scroll next to 0 index

[stub4ever]

Summary

Based on the images, you will see the last red will disappears when come scroll to the 0 index with loop true, and also when the last red prepare scroll to view, we still not seeing the orange card. This behavior happens in the last index or the cards and when start a loop.

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

const delay = 6000;
  const hasAutoplay = true;
  const [isPlaying, setPlaying] = useState<boolean>(hasAutoplay);

  const [emblaRef, emblaApi] = useEmblaCarousel(
    {
      align: 'start',
      slidesToScroll: 1,
      loop: true,
      skipSnaps: true,
    },
    []
  );

  const carouselRef = useRef(null);
  useHoverCallback(
    carouselRef,
    () => setPlaying(false),
    () => setPlaying(hasAutoplay === true)
  );

  const autoplay = useCallback(() => {
    if (!emblaApi) return;
    const lastIndex = cards.length - 1;

    if (
      !emblaApi.canScrollNext() &&
      emblaApi.slidesInView().includes(lastIndex)
    ) {
      emblaApi.scrollTo(0);
    } else {
      emblaApi.scrollNext();
    }
  }, [emblaApi]);

  useInterval(
    () => {
      autoplay();
    },
    isPlaying ? delay : null
  );

  const onSelect = useCallback(() => {
    if (!emblaApi) return;
  }, [emblaApi]);

  useEffect(() => {
    if (!emblaApi) return;
    onSelect();
    emblaApi.on('select', onSelect);
  }, [emblaApi]);

CodeSandbox example

No response

[stub4ever]

Code Structure

[davidjerleke]

Hi @stub4ever,

Thanks for your question. You have a working example of an Embla setup with Autoplay and loop: true here in the docs. Please compare your CSS and JS with the example to solve your problem.

Best,
David