1️⃣

AutoPlay 設定の EmblaCarousel で現在のインデックスを算出する

2024/11/04に公開

 インデックスの算出方法embla は UI に対してかなり薄くしか影響しないので、

自分で現在のインデックスを取る必要がある。

AutoPlay としていると、マウスイベントも発生しないので useEffect でインデックスを更新する関数を用意してあげる。
下記はその例（もろもろ抜粋）。
import useEmblaCarousel from "embla-carousel-react";
import Autoplay from "embla-carousel-autoplay";
import { useEffect, useState } from "react";

...
const [emblaRef, emblaApi] = useEmblaCarousel(
    { loop: true, align: "center" },
    [
      Autoplay({
        delay: 10_000,
      }),
    ],
  );

const [selectedIndex, setSelectedIndex] = useState<number>(0);


// current index 更新
  useEffect(() => {
    if (!emblaApi) return;

    const onSelect = () => {
      const index = emblaApi.selectedScrollSnap();
      setSelectedIndex(index);
    };

    emblaApi.on("select", onSelect);

    return () => {
      emblaApi.off("select", onSelect);
    };
  }, [emblaApi]);
...

 ドキュメント類公式ドキュメント

https://www.embla-carousel.com/
こちらのディスカッションにある実装例も参考になった。

https://github.com/orgs/mantinedev/discussions/6071

インデックスの算出方法

ドキュメント類

Discussion