Embla-CarouselでAutoplayで自動化と時間指定をする方法。

はじめに
1. 環境
Embla Carouselで自動的にカルーセルを流す方法
1. パッケージのインストール
2. オプションの指定
Embla Carouselで自動カルーセルの時間を設定する方法
Autoplayの設定項目
1. Auto.d.ts
2. Options.d.ts
参考文献
おわりに

はじめに

Embla-Carouselとは、非依存型でシンプルなカルーセルライブラリです。
様々なオプションがあり、自由度高く設定することができます。

Embla-Carouselにはサンプルが多く転記し易いですが、バージョンによるオプション等の指定方法も異なります。

今回はEmbla Carouselで自動的にカルーセルを流す方法、
何秒おきに流すかを指定する方法を記します。

環境

Next.js:14.0.3
embla-carousel-react:^8.0.0-rc22
embla-carousel-autoplay:^8.0.0-rc22
embla-carousel:^8.0.0-rc22

Embla Carouselで自動的にカルーセルを流す方法

パッケージのインストール

まずは必要なパッケージをインストールします。

npm install embla-carousel-react embla-carousel embla-carousel-autoplay

オプションの指定

サンプル

と同じ構成なので、省略して記します。

home/page.tsx

'use client'
import EmblaCarousel from '@/ui/atom/carousel/emblaCarousel';
import { EmblaOptionsType } from 'embla-carousel'
const Home = () => {
  const { pageTitle, setPageTitle } = useSiteInfoContext();
  const OPTIONS: EmblaOptionsType = { 
    loop: true,
    slidesToScroll:1,
    duration:50
  }
  return (
    <EmblaCarousel  slides={Items} options={OPTIONS} />
  )
}
export defalut Home;

loop

は、スライドが終端までいったときに、始端に戻るようにする設定です。trueは有効になります。これは自動・手動関係なしに作用します。

slidesToScrollは、自動再生させる際に使用されるオプションです。このフラグが1の場合、自動再生が有効になります。

durationは、イベントが着火した時のスクロール時間を示しています。この値が大きいほど、スクロールが長くなり、短ければスクロール時間が短くなります。デフォルトは25です。（継続時間はミリ秒単位ではありません。）

上記の設定により、自動スライドを有効にすることができます。
次いでは、自動スライドの時間間隔を設定します。

Embla Carouselで自動カルーセルの時間を設定する方法

本記事では、上記EmblaCarouselコンポーネント内を記します。
また、サンプルとほぼ同じため、省略して記します。

emblaCarousel.tsx

import { EmblaOptionsType } from 'embla-carousel'
import Autoplay from 'embla-carousel-autoplay'
import useEmblaCarousel from 'embla-carousel-react'

const TWEEN_FACTOR = 4.2

const numberWithinRange = (number: number, min: number, max: number): number =>
  Math.min(Math.max(number, min), max)
type PropType = {
  slides: T[]
  options?: EmblaOptionsType
}
const EmblaCarousel= (props:React.PropsWithChildren<PropType>) => {
  const { slides, options } = props
  const [emblaRef,emblaApi] = useEmblaCarousel(options, [Autoplay({delay:2000})])
//以下略

上記のように、
import Autoplay from 'embla-carousel-autoplay'のようにAutoplayをインポートしてAutoplay({delay:2000})と示すことで、表示切替する時間間隔を指定できます。

前述したdurationと、delayの指定をするだけで思い通りのスクロールが実現できます。

Autoplayの設定項目

上記で設定は完了ですが、なかなか上記の設定を紹介しているところが少なく
今回は以下をベースに設定しました。

importしているembla-carousel-autoplayを開きます。

Auto.d.ts

export type AutoplayType = CreatePluginType<{ play: (jump?: boolean) => void;
    stop: () => void;
    reset: () => void;
    isPlaying: () => boolean;
}, OptionsType>;
export type AutoplayOptionsType = AutoplayType['options'];
declare function Autoplay(userOptions?: AutoplayOptionsType): AutoplayType;
declare namespace Autoplay {
    var globalOptions: Partial<import("embla-carousel/components/Options").CreateOptionsType<OptionsType> | undefined;
}
export default Autoplay;

省略はしていますが、上記のようにプラグインやオプションタイプが備えられています。
今回はオプションで指定しているので、OptionsTypeを見てみます。

Options.d.ts

import { CreateOptionsType } from 'embla-carousel/components/Options';
export type OptionsType = CreateOptionsType<{
  delay: number;
  jump: boolean;
  playOnInit: boolean;
  stopOnFocusIn: boolean;
  stopOnInteraction: boolean;
  stopOnMouseEnter: boolean;
  stopOnLastSnap: boolean;
  rootNode: ((emblaRoot: HTMLElement) => HTMLElement | null) | null;
}>;
export declare const defaultOptions: OptionsType;

ここで、delay以外の指定もできることがわかります。