はじめに
Nuxt.jsにて作っているサイトにてスライドショーを取り入れたかったのでvue-awesome-swiper
を導入してみました。
導入
1.ライブラリのインストール
ドキュメントルート
npm install swiper@5.x vue-awesome-swiper
(追記)
Swiperのバージョンを6系だとペジネーション等がうまく動作しなかったため、明示的に5系をインストールするようにしました。公式でも推奨されていました。
2.プラグインに追加
plugins/vue-awesome-swiper.jsを作成
plugins/vue-awesome-swiper.js
import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
Vue.use(VueAwesomeSwiper);
3.nuxt.config.jsに追記
nuxt.config.js
build: {
vendor: ['vue-awesome-swiper']
},
plugins: [
{ src: '@/plugins/vue-awesome-swiper.js', ssr: false }
],
以上で導入は完了です。
利用
試しにindex.vueに実装
index.vue
<template>
<div>
<swiper :options="swiperOption">
<swiper-slide>スライダー1</swiper-slide>
<swiper-slide>スライダー2</swiper-slide>
<swiper-slide>スライダー3</swiper-slide>
</swiper>
</div>
</template>
<script>
export default {
data() {
return {
swiperOption: {
slidesPerView: 1, // 1枚に表示するスライド数
loop: true // 最終ページの次にまた1枚目が表示される
}
};
}
};
</script>
あれっ?
調べてみたところcssファイルの読み込みも必要でした。
plugins/vue-awesome-swiper.jsを作成
import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/css/swiper.css"; // 追記 swiper5系だとこれ
// import 'swiper/swiper-bundle.css' ちなみに6系だとこちらです
Vue.use(VueAwesomeSwiper);
動いた〜!
おわりに
とりあえず最低限ですがスライダーの導入ができました!
カスタマイズ性も高そうですのでこちらを使っていきたいと思います!
参考
【Vue.js】Vue.js(Nuxt.js)でスライダーを導入してみた【vue-awesome-swiper】
Nuxt.js環境下にSwiperを導入してみる。
ShopifyのBuy Button機能の活用 〜2.vue-awesome-swiperを使って多数の商品をスライダー表示する〜
Nuxtにvue-awesome-swiperを入れてスライドショーを実装する