Swiper を使う時の注意点

Swiper 6.6.2 時点での情報。

Swiper をつかうときに、そのまま読み込むと loop などが使えない。

import Swiper from 'swiper'
import 'swiper/swiper-bundle.css' // css-loader と style-loader が必要

const hoge = new Swiper('.hoge', { loop: true, autoplay: true})

これは実は swiper のみの読み込みは最小限の機能になっているので、必要な機能を読み込むようにする。

import Swiper from 'swiper/bundle' // すべての機能
import Swiper, { Navigation, Pagination } from 'swiper' // 部分的に読み込む場合