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

本記事の内容

vue.jsでスライダー（カルーセル）を簡単に実装できるコンポーネント
VueAwesomeSwiper(MITLicense)を使ってスライダーを作るのが目的です。

環境

• windows10
• VisualStudioCode
• vue.js(3.0.3)
• npm (6.4.1)
• vuex

1.VueAwesomeSwiperを追加する

npm installでVueAwesomeSwiperを追加します

npm install vue-awesome-swiper

2.main.jsに追加する

グローバルでマウントする場合は以下の追加です。

main.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

各コンポーネントでマウントする場合はこちらを使用します

hoge.vue

// require styles
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

3.実際に使ってみる

サンプルコードは公式のgithubに書かれています。
基本的にそのままコピペで動きます。
http://idangero.us/swiper/demos/

4.追加テクニック

1.初期スライドを変更したい

swiperOptionに以下のプロパティ(initialSlide)を設定します

hoge.vue

swiperOption: {
  ~~
  initialSlide:1,
}

数値を変更すると初期スライドが変更されます。

2.スライドが変更された時にイベントを実行したい

swiperOptionに以下のプロパティを設定します

hoge.vue

swiperOption: {
  ~~
        on: {
          slideChangeTransitionEnd: () => {
               console.log(this.swiper.activeIndex);
            }
        }
}

computedにも追加しておきます。

hoge.vue

  computed: {
    swiper() {
      return this.$refs.questListSwiper.swiper;
    },

これで変更時にそのスライドが何枚目のスライドなのかがコンソールに表示されます。
ただし、この場合、初期スライダー(initialSlide)を設定している場合、エラーが発生する為少しオプションの方に条件を追加します。

hoge.vue

        on: {
          slideChangeTransitionEnd: () => {
               if(this.swiper){
                  console.log(this.swiper.activeIndex);
                }
            }
        }

これでエラーは回避できます。

上記２つを組み合わせることで、例えばページ遷移時の情報をstoreに保存して、次回表示するタイミングでそのスライドから、といった処理が可能になります。

まとめ

非常に簡単にスライダーを実装できますが、今回実装した機能はVueAwesomeSwiperのほんの１部分にすぎません。
興味がある方はドキュメントを１読してみることをお勧めします。

参考

VueAwesomeSwiper
Code Blog Bt