Vue.jsでカルーセルを実装してみた

「カルーセル（スライダー）の実装」と聞くと、スワイプ動作の制御やレスポンシブ対応など、実装が大変そうなイメージがあったのですが、今回、Vue.jsのプロジェクトで横スクロールのカルーセルを実装してみてとても簡単だったので、シェアします。

カルーセルとは？

「回転木馬（メリーゴーラウンド）」や、空港の「手荷物受取所の回転台」を指す言葉です。 Webのカルーセルも、コンテンツがくるくると回るように入れ替わる動きをすることから、この名前がつけられたとのことです。

(出典: Wikipedia)

使ったライブラリ

vue3-carousel
Vue 3専用に作られた軽量なカルーセルライブラリです。

準備

ライブラリをインストールしてください。

npm install vue3-carousel

実装コード

スマホ表示の時だけ、コンポーネントを横並びにしてスライドさせる実装例です。

<script setup>
import { Carousel, Slide } from 'vue3-carousel';

// ... isMobile判定やitems（データ配列）の取得ロジックなどは別途実装してください

</script>

<template>
  <Carousel
    class="mt-6"
    v-if="isMobile" 
    :items-to-show="3.5"  // 一度に表示する数
    :wrap-around="false"  // カルーセルをループさせない
  >
    <Slide v-for="item in items" :key="item.id" class="px-1">]
      // SlideComponentは別途実装してください。
      <SlideComponent :data="item" />
    </Slide>
  </Carousel>
</template>

実装イメージ

itemの4個目の端が見切れて「横にスクロールできそう感」を出しました。

感想

vue3-carousel はコンポーネントとして Carousel と Slide をインポートして囲むだけなので、簡単に実装できました！