Nuxt3でカルーセル使うならvue3-carouselがオススメ!

2022/10/28に公開約4,200字

Nuxt3でカルーセルUI使いたいけどNuxt3に対応してるカルーセルライブラリって意外と少ない!色々カスタマイズしたい!そんなあなたにvue3-carousel
https://ismail9k.github.io/vue3-carousel/getting-started.html

環境

Nuxt: 3.0.0-rc.12
vue3-carousel: v0.2.4

npm install vue3-carousel

# or use yarn
yarn add vue3-carousel

Nuxt3での実装例

コンポーネントをインポートするだけ!簡単。

<script setup lang="ts">
import 'vue3-carousel/dist/carousel.css'
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
</script>
<template>
  <Carousel>
    <Slide v-for="i in 10" :key="i">
      <div>{{ i }}</div>
    </Slide>
    <template #addons>
      <Navigation />
      <Pagination />
    </template>
  </Carousel>
</template>

とりあえずこれだけは使っておけオプション

これだけは使っておけというオプション。詳細な使い方は公式のサンプルを見てください。

wrap-around

始まりと終わりが繋がり、カルーセルが無限にループするようになる。

settingsとbreakPoints

これでレスポンシブ対応できます。settingsにデフォルトの設定値(スマホ用)、breakPointsでそれ以外を設定していきます。

<script setup lang="ts">
import 'vue3-carousel/dist/carousel.css'
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
// スマホ設定
const settigns = {
  itemsToShow: 1, // スマホは1個だけ表示
}
// PC設定
const brakepoints = {
  // 640px and up
  640: {
    itemsToShow: 2.5, // PCは前後に半分ずつ表示
  }
}
</script>
<template>
  <Carousel :settings="settings" :breakpoints="brakepoints">
    <Slide v-for="i in 10" :key="i">
      <div>{{ i }}</div>
    </Slide>
  </Carousel>
</template>

autoplay

スライドショー的に自動で回せる。

基本のデザインはカスタムプロパティで設定

基本的な色とか形とかはcssのカスタムプロパティで設定できます。ただしsecondaryの色はナビゲーションのホバー時の色とページネーションの非アクティブ時の色で使われてしまうので、それぞれ個別に設定した方がいいと思います。

:root {
  /* Color */
  --vc-clr-primary: #000;         // メインの色
  --vc-clr-secondary: #090f207f;  // セカンダリーは結構使いづらい
  --vc-clr-white: #ffffff;

  /* Icon */
  --vc-icn-width: 1.2em;

  /* Navigation */
  --vc-nav-width: 30px;
  --vc-nav-height: 30px;
  --vc-nav-border-radius: 0;
  --vc-nav-color: var(--vc-clr-primary);
  --vc-nav-color-hover: var(--vc-clr-secondary);
  --vc-nav-background: transparent;

  /* Pagination */
  --vc-pgn-width: 12px;
  --vc-pgn-height: 4px;
  --vc-pgn-margin: 4px;
  --vc-pgn-border-radius: 0;
  --vc-pgn-background-color: var(--vc-clr-secondary);
  --vc-pgn-active-color: var(--vc-clr-primary);
}

あとページネーションがデフォルトだと長方形のあまり見慣れない形してるので、下記設定でよくある感じのスタイルになります。

--vc-pgn-width: 8px;
--vc-pgn-height: 8px;
--vc-pgn-border-radius: 9999px;


見慣れた丸ポチスタイル

細かいデザインはCSSで調整

CSSをいじれば様々なデザインにも対応できます。コンポーネント内でstyleをいじる場合は、scoped属性を付けてしまうと反映されないので注意。

前後のスライドを少し小さめで薄くする

.carousel__slide--prev,
.carousel__slide--next {
  opacity: 0.7;
  transform: scale(0.9);
}

ナビゲーションをページネーションの横に配置

.carousel__prev,
.carousel__next {
  top: auto;
  bottom: -10%;
}
.carousel__prev {
  left: 30%;
}
.carousel__prev {
  right: 30%;
}

スロットプロパティで現在のスライドを取得

スロットプロパティでスライド数slideCountや現在のスライド番号currentSlideを取得できるので内部コンポーネントの出し分け等に利用できます。

<Carousel>
  <template #slides="{ currentSlide }">
    <Slide v-for="[i, data] in dataList.entries()" :key="i">
      <MyComponent
        :data="data"
        :current-flag="currentSlide === i"
      />
    </Slide>
  </template>
  <template #addons="{ slidesCount }">
    <Navigation v-if="slidesCount > 0" />
    <Pagination v-if="slidesCount > 0" />
  </template>
</Carousel>

refを使えばJS側での制御も可能

Carouselコンポーネントをrefで取得すれば、JS側でカルーセルの操作やデータを取得したりすることもできます。

<script setup lang="ts">
import 'vue3-carousel/dist/carousel.css'
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
// refでカルーセルをセット
const myCarousel = ref(null)
function movePrevSlide() {
  // 現在のスライド数とスライド最大値を取得して比較
  if (myCarousel.data.currentSlide < myCarousel.data.maxSlide) {
     myCarousel.prev()  // 前に移動
  }
}
</script>
<template>
  <Carousel ref="myCarousel">
    <Slide v-for="i in 10" :key="i">
      <div>{{ i }}</div>
    </Slide>
  </Carousel>
</template>

まとめ

vue3-carouselはシンプルながらもかゆいところに手が届く使い勝手の良いカルーセルだと思います。機会があればぜひ使ってみてください。

Discussion

ログインするとコメントできます