Nuxt.jsとvue-awesome-swiperでスワイパーする

Nuxt.jsでスワイパーを作ります。

前提条件

• Nuxt.jsとPugとStylusがインストールされていること

インストール

$ npm i --save vue-awesome-swiper

使い方

touchコマンドでプラグイン用ファイルを作成する

$ touch plugins/vue-awesome-swiper.js

plugins/vue-awesome-swiper.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 } */)

nuxt.config.jsでプラグインを読み込む

nuxt.config.js

module.exports = {
  plugins: [
    { src: '~/plugins/vue-awesome-swiper', mode: 'client' }
  ]
}

client-onlyの中にswiper、その下にswiper-slideを欲しいスライド分だけ配置する。
swiperのoptions属性に渡しているオブジェクトで、スワイパーのオプションを設定する。
この例では1セットに3枚のスライドを表示し、スライドをループさせる状態にある。

pages/test.vue

<template lang="pug">
.test
  client-only
    swiper(:options="swiperOption")
      swiper-slide(v-for="item in 10" :key="item")
        .test-item {{ `Slide ${item}` }}
</template>

<script>
export default {
  data: () => ({
    swiperOption: {
      slidesPerView: 3, // １セットに何枚のスライドを表示するか
      loop: true, // スライドをループさせるか
    }
  })
}
</script>

<style lang="stylus">
.test
  width 100vw
  height 100vh

.swiper-container
  width 100%
  height 100%

.test-item
  display flex
  justify-content center
  align-items center
  width 100%
  height 100%
</style>

その他のオプションは参考文献のgithubを参照してください。

参考文献

この記事は以下の情報を参考にして執筆しました。

• vue-awesome-swiper - npm
• vue-awesome-swiper - github