Embla Carousel で左右が少し見切れたスライドを作る

React と TypeScript の構成でカルーセルスライダーに Embla Carousel をよく利用しており、基本的な使い方を以前ご紹介いたしました。

https://zenn.dev/yall/articles/4c7ab236d60553

GitHub でのコントリビュートも行うなど個人的にはすごく応援しております。

https://github.com/davidjerleke/embla-carousel/pull/1096#event-15826032457

shadcn/uiでも採用され、今後普及しそうなのですが表題のUIを実現する方法について言及がネット上に見当たらなかったので記事として残します。

サンプルコードとサンプルページ

サンプルコードとサンプルページは以下に用意しました。

https://github.com/yasuhiro-yamamoto/nextjs-playground/tree/main/src/components/CenteredCarousel

https://nextjs-playground.pages.dev/centered-embla-carousel

ポイントを抜粋

ポイントは align オプションの指定です。

https://www.embla-carousel.com/api/options/#align

"start" | "center" | "end"が指定できるのですが、これらで実現できない柔軟なレイアウトのために関数も指定できるようになっています。

align: (viewSize: number, snapSize: number, index: number) => number

表示サイズはCSSで指定しスライドの配置については align オプションで指定することで表題の左右が見切れたUIが実現できます。

例

// 左右それぞれのスライドが 半分 見切れる
// flex-basis: calc(100% / 2);// 中央に1枚
// flex-basis: calc(100% / 3);// 中央に2枚
const [sliderRef, sliderAPI] = useEmblaCarousel({
  align: (viewSize, snapSize, index) => {
    return snapSize / 2;
  }
})

// 応用
// 左右それぞれのスライドが 8分の1 見切れる
// flex-basis: calc(100% / 1.25);
const [sliderRef, sliderAPI] = useEmblaCarousel({
  align: (viewSize, snapSize, index) => {
    return snapSize / 8;
  }
})

viewSize はビュー全体のサイズ、
snapSize はスライド1枚のサイズを受け取ることができる

おわりに

公式ドキュメントを読めばわかる情報ですが、日本語の情報を残しておくのも貢献の方法かと思い記事を書かせていただきました。

最後までご覧いただきありがとうございました。
それでは良いフロントエンジニアライフを👋