はじめに
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以外の指定もできることがわかります。
参考文献
Embla Carousel Options Embla Carousel Predefined Examples
おわりに
非常にシンプルなライブラリで最小限の導入で扱えました。
依存性はないので、競合は起こらないですが、styleを指定する必要があります。
ただ、サンプルも多くて、そこはコピペで済みそうです。
コメント