Vue3/Typescriptで縦型サムネイル付きカルーセルを作った

はじめに

Vue3/Typescriptで縦型サムネイル付きカルーセルを作る際、条件を満たすUIライブラリを使うのに苦労した。
以下の表は、実装を検討したUIライブラリと断念した理由である。

検討結果

UIライブラリ	断念の理由
slick	DOMへのアクセスと操作において、vueは仮想DOM (Virtual DOM) ベースのアーキテクチャを使用する一方、slickの技術jQueryは直接DOMにアクセスする古いアプローチを採用していてバグが起こる原因になると考えたため
Antd vue	サムネイルの表示枚数を指定できなかったため
vue-slick-carousel	vue3に対応していなかったため
vue3-carousel	サムネイルを縦方向にスライドするカスタムが難しかったため

もう少し時間をかければ各ライブラリを細かく検証したり手探りでカスタマイズ方法を見つけられたと思うが、今回は1週間とリミットを設けた。それぞれのUIライブラリを試して結局Splideに落ち着いた。

Splide

Splide（スプライド）は、モバイルファーストで軽量なJavaScriptライブラリで、カルーセルやスライダーなどの画像とコンテンツのスライドショーを実装するためのツールです。Splideは、直感的なインターフェース、高度なカスタマイズオプション、タッチデバイスに対応しており、ウェブサイトやウェブアプリケーションでスライドショーコンポーネントを実装するための強力なツールとして広く利用されています。 (ChatGPTから引用)

正直、Splideを利用してカルーセルを実装した後に気づいたのだが、Splideの最終リリースが2022年9月でそれ以降あまりメンテされていない印象なので、今後リファクタリングの機会があったらもう一度UIライブラリを見直そうと思う。。

以下を参照

実装したコードではなく参考にしたサイトを載せておく。
https://codesandbox.io/s/splide-slider-sandbox-vertical-jls7v?file=/src/components/BCVerticalGallery.vue