ラッコWeb 
スライダーUIを作成しよう！
みなさん、こんにちは。どんぶラッコです。
スライダーUI、よく作りますよね（突然）
こんな風に、トップ画面で行ったり来たりできる画像群など、Webページ作成の現場ではよく使われるものです。
これを実現するためのライブラリとして有名なのが Swiper です。
これをNuxt.jsでも導入したい！
ということで、今回は、 vue-awesome-swiper を用いた Nuxt.jsへの Swiper導入方法についてお伝えします！
vue-awesome-swiper とは、swiper を Vue component 化してくれているライブラリです。
メンテナンスが1年前とやや古いですが、Weekly のダウンロード数が 約9万件あり、信頼できそうです。
vue-awesome-swiper 導入手順
パッケージインストール
まずは npm または yarn を使ってインストールします。
npm install swiper vue-awesome-swiper --save
# または
yarn add swiper vue-awesome-swiperプラグインの追加
Nuxt.jsの場合、プラグインファイルに設定を追加します。
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper)swiperのバージョンが6以上か、それ以前かでCSSの読み込み先が違います。
ネットに落ちてる情報は5系の情報だらけだったので混乱しました笑
ご自身がダウンロードした swiperのバージョンを確認しておきましょう！
Swiper 6.0.0 以上
import 'swiper/swiper-bundle.css'Swiper 5.x 以下
import 'swiper/css/swiper.css'プラグインファイルを作成できたら、nuxt.config.js に設定を追記します。
export default {
// 中略
plugins: [
{ src: '~/plugins/VueAwesomeSwiper.js', mode: 'client' }
],
// 以下略
}
コンポーネントを記述
これで設定は完了です！あとは、コンポーネント内に実際に swiper コンポーネントを記述していけばOKです
公式でNuxt.jsでの書き方サンプルを掲載してくれているので参考に書いてみます。
<template>
<div class="example">
<!-- component: only render Swiper on browser env -->
<client-only>
<swiper
ref="carousel"
class="swiper"
:options="swiperOptions"
@ready="onSwiperRedied"
@clickSlide="onSwiperClickSlide"
@slideChangeTransitionStart="onSwiperSlideChangeTransitionStart"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<swiper-slide>Slide 6</swiper-slide>
<div slot="pagination" class="swiper-pagination" />
</swiper>
</client-only>
</div>
</template>
<script>
export default {
name: 'SwiperNuxt',
data () {
return {
swiperOptions: {
loop: true,
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
dynamicBullets: true
}
}
}
},
methods: {
onSwiperRedied (swiper) {
console.log('Swiper redied!', swiper)
},
onSwiperSlideChangeTransitionStart () {
console.log('SwiperSlideChangeTransitionStart!')
},
onSwiperClickSlide (index, reallyIndex) {
console.log('Swiper click slide!', reallyIndex)
}
}
}
</script>
<style lang="scss" scoped>
.example {
height: auto;
.swiper {
height: 300px;
width: 100%;
.swiper-slide {
text-align: center;
font-size: 38px;
font-weight: 700;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-pagination {
> .swiper-pagination-bullet {
background-color: red;
}
}
}
}
</style>
無事に表示されました！
この記事のまとめ
Swiper を jQueryサイトとの組み合わせで使う方は多いと思いますが、このように設定するとVueでも手軽に実装できますね♪
みなさんもぜひチャレンジしてみてください！
