基本的な実装はこの辺りが参考になる。
https://qiita.com/nakanishi03/items/c12221be7645b84016c8
## 相違点
[公式](https://github.com/surmon-china/vue-awesome-swiper)を参考に、説明する。
### Install
Swiper本体のインストールも必要になる。
```bash
yarn add swiper@5.x vue-awesome-swiper
```
ここで注意するのは、vue-awesome-swiperではSwiper5が推奨されているが、更新によりSwiper6が登場しているため最新版をインストールすると動作がおかしくなる(ページネーションやナビゲーションが機能しないなど)。
必ずバージョン指定をしよう。
### CSS
上記記事には記載がないが、Global CSSとしてSwiperのCSSを登録する。
```js
/* nuxt.config.js */
module.exports = {
...
css: [
...
'swiper/css/swiper.css'
],
}
```
### SSRで動かしている場合
Nuxt.jsあるあるだが、SSR対応していないライブラリはSSRで動かすとバグる。
該当箇所をクライアントサイドのみで動作させよう。
- Nuxtバージョンがv.2.9.0以上の場合
```
<client-only>
<swiper>
<swiper-slide>slide</swiper-slide>
</swiper>
</<client-only>
```
- Nuxtバージョンがv.2.9.0未満の場合
```
<no-ssr>
<swiper>
<swiper-slide>slide</swiper-slide>
</swiper>
</<no-ssr>
```
頻繁に更新されるライブラリはありがたいけど、アップデートで実装方法や動作が変わることが多いから注意が必要だね。
コメント (0)
あなたもコメントしてみませんか
アカウント新規作成(無料)
既にアカウントを持っている方は
ログイン