無限スクロールスライダー Infinite Marquee Slider
framer-motionを使った無限スクロールコンポーネントです。水平・垂直方向に対応し、ドラッグ操作やホバーによる一時停止も可能です。
目次
About Preview
このコンポーネントを使いたい場合は、component.tsxの内容をコピーして、render.tsxを参考にコンポーネントを使ってください
Default Packages
プレビュー画面では以下のパッケージがインストールされています
- [email protected]
- TailwindCSS
- clsx
- [email protected]
pnpm add tailwindcss clsx framer-motion
Component PropTypes
type MarqueeCardProps = {
width?: string;
height?: string;
children: React.ReactNode;
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
className?: string;
};
type MarqueeWrapperProps = {
direction?: "left" | "right" | "top" | "bottom";
speed?: number;
repeatCount?: number;
pauseOnHover?: boolean;
draggable?: boolean;
width?: string;
height?: string;
cardWidth?: string;
cardHeight?: string;
gap?: number;
children: React.ReactNode;
className?: string;
};
使い方
カードをラッパーで囲む
<MarqueeWrapper>の中に<MarqueeCard>を配置します。
無限ループを作る
repeatCountを増やすとスムーズにスクロールし続けます。
ドラッグとホバー
draggable={true}にするとカードをドラッグ可能
pauseOnHover={true}にするとマウスオーバーで一時停止
方向の切り替え
- direction="right" → 左から右
- direction="left" → 右から左
- direction="top" → 下から上
- direction="bottom" → 上から下
