Nuxt.jsで高機能スライダーSwiperを使ってみた

Nuxt.jsにSwiperを入れてスライダーを使いたかったので、そのやり方を共有

環境

• Nuxt.js v2.4.5
• vue-awesome-swiper v3.1.3

インストール

Nuxt.jsのプロジェクト下で

yarn add vue-awesome-swiper

pluginsの設定

pluginsのディレクトリにswiperを読み込み

plugins/swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'

Vue.use(VueAwesomeSwiper)

nuxt.config.jsでの読み込み

nuxt.config.js

plugins: [
    { src: '~/plugins/swiper.js', ssr: false }
],

これで使う準備が整いました。

Swiperの設定

pages/index.vue

<div
    v-swiper:mySwiper="swiperOption"
    class="swiper-container"
>
    <ul class="swiper-wrapper">
        <li class="swiper-slide">slide1</li>
        <li class="swiper-slide">slide2</li>
        <li class="swiper-slide">slide3</li>
        <li class="swiper-slide">slide4</li>
        <li class="swiper-slide">slide5</li>
        <li class="swiper-slide">slide6</li>
    </ul>
    <button
        class="swiper-button-prev"
        type="button"
    >
        前へ
    </button>
    <button
        class="swiper-button-next"
        type="button"
    >
        次へ
    </button>
</div>

index.vue

export default {
    data () {
        return {
            swiperOption: {
                slidesPerView: 'auto',
                centeredSlides: true,
                spaceBetween: 50,
                loop: true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                }
            }
        }
    }
}

dataプロパティにSwiperのオプションを設定。

Swiper標準のCSSを読み込む際には下記をコンポーネントで読み込んでください。

@iwathi さんのアドバイスで追記しました！

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

これでSwiperがつかえます。

まとめ

Swiper便利ですね。このモジュール作ってくれた方に感謝