vue.jsでスライダーを導入する

htmlで実装していたページをvue.js形式で作り直すことになった。
その際にスライダーを導入する必要があったため下記の対応を行った。

１、VueAwesomeSwiperを追加
◯yarnでのインストール
yarn add vue-awesome-swiper

◯npmでのインストール
npm install vue-awesome-swiper

２、main.jsへの記述追加

// Swiper
import VueAwesomeSwiper from 'vue-awesome-swiper';
// require styles
import 'swiper/dist/css/swiper.css';
Vue.use(VueAwesomeSwiper);

３、出力するコンポーネントにスワイパーを読み込み

<swiper :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide>
        スライダー01
    </swiper-slide>
    <swiper-slide>
        スライダー02
    </swiper-slide>
    <swiper-slide>
        スライダー03
    </swiper-slide>
    <swiper-slide>
        スライダー04
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
</swiper>

<script>
export default {
  data() {
    return {
      swiperOption: {
        ※必要なオプションをここに記入※
      }
    };
  }
};
</script>

参考サイト

Qiita

【Vue.js】vuejsで簡単にスライダー(カルーセル)を爆速で実装する

https://qiita.com/github129/items/d8951c2a1371a310f07e

GitHub

vue-awesome-swiper

https://github.com/surmon-china/vue-awesome-swiper