nuxt.jsにvue-carouselを導入してスライダーを作成

導入

https://ssense.github.io/vue-carousel/guide/
こちらの公式ガイドを参考に

コマンドラインでvue-carouselをインストール

npm install -S vue-carousel

開発中のプロジェクトファイルのpluginsフォルダの中に
vue-carousel.jsファイルを作成
以下を記入

vue-carousel.js

import Vue from 'vue'
import VueCarousel from 'vue-carousel'

Vue.use(VueCarousel)

nuxt.config.jsファイルに追記

nuxt.config.js

plugins: [{ src: '~/plugins/vue-carousel', ssr: false }],

スライダーを作成するファイルにimportする。

公式ガイドの通りの記載だと読み込みが出来ずうまく行かなかったので、
https://qiita.com/ProjectEuropa/items/9c9f5fbd1e786b9762ba
こちらの@ProjectEuropaさんの記事を参考にCarouselとSlideをそれぞれ別箇にimportするとうまく動きました。

ありがとうございます！

slider.vue

<template>
  <carousel>
    <slide>
      <img src="@/assets/images/slide1.jpg" />
    </slide>
    <slide>
      <img src="@/assets/images/slide2.jpg" />
    </slide>
  </carousel>
</template>

<script>
import Carousel from 'vue-carousel/src/Carousel.vue'
import Slide from 'vue-carousel/src/Slide.vue'
export default {
  components: {
    Carousel,
    Slide
  }
}
</script>

カスタマイズ

https://ssense.github.io/vue-carousel/api/
こちらの公式ガイドを参考に<carousel>タグ内に色々と記載すると簡単にカスタマイズが出来ます。

スタイルも.VueCarousel-slide で指定するとカスタマイズ出来ます。
めちゃめちゃ便利です！！

slider.vue

<template>
  <carousel
    :per-page="1"
    :autoplay="true"
    :loop="true"
    :pagination-padding="5"
    :autoplay-timeout="4000"
  >
    <slide>
      <img src="@/assets/images/slide1.jpg" />
    </slide>
    <slide>
      <img src="@/assets/images/slide2.jpg" />
    </slide>
  </carousel>
</template>

<script>
import Carousel from 'vue-carousel/src/Carousel.vue'
import Slide from 'vue-carousel/src/Slide.vue'
export default {
  components: {
    Carousel,
    Slide
  }
}
</script>

<style>
.VueCarousel-slide {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #fff;
  box-sizing: border-box;
}
</style>