swiper ver.6.0.x へのバージョンアップに対応する #JavaScript

※IE11への対応を個別でしなければならなくなったので忘れないうちに書いておく。

追記 swiper7.x.x ではまた仕様が変わりましたので、以下の書き方が利用できません。
使用後、また記事を作成します。

2020年7月3日に Swiper 6.0.0がリリース

前と違って、オプションのような機能（effect-fadeやpaginationなど）は

index.js

import Swiper  from 'swiper'

だけでは動かず、個別で入れないといけなくなりました。
https://github.com/nolimits4web/swiper/blob/master/CHANGELOG.md

ただし動かす時の書き方が変わっただけで、インストール（npmやyarn）は変わってません。

以下バージョン6以上だと必要な対応

↓このように入力。
個別の機能はここに入ってるものになる。JSとSCSS,LESSが一緒に入ってます。
https://swiperjs.com/api/#styles
https://github.com/nolimits4web/swiper/tree/master/src/components

index.js

import { Autoplay, Pagination, Swiper } from 'swiper'
Swiper.use([Autoplay, Pagination])

あとの表示するための書き方は以前と同じでOK

index.js

new Swiper('.swiper-container', {
      loop: true,
      slidesPerView: 1,
      centeredSlides: true,
      autoplay: {
        delay: 5000,
        disableOnInteraction: false,
      },
      speed: 2000,
      pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true,
      },
    })

htmlのほうは以前のままで大丈夫です。
今回から描き方が変更になるのはJSとSCSS（またはLESSなど）です。

SCSSのほうも書いておきます。
パスはそれぞれの環境に合わせて変更してください。

_swiper.scss

@use './node_modules/swiper/swiper';
@use './node_modules/swiper/components/pagination/pagination';

基本JSとSCSS（or LESS)は一緒に追加することを忘れないように。

今回からIE11の対応がなくなった？みたい（IE11で閲覧したときに動かなかった）なので、polyfillを入れます。
IE非対応の時はやらなくてOKです。

index.js

import 'core-js/features/number/is-nan' // swiper入れる前に入れときますか
import 'custom-event-polyfill'

import { Autoplay, Pagination, Swiper } from 'swiper'
Swiper.use([Autoplay, Pagination])

追記（2021.06.09追記）
縦向きのスライダーはIEではどうしても動かないみたいなので、
5.4.5 の古いバージョンを利用してください。

index.js

import Swiper from 'swiper'

new Swiper('.swiper-container', {
      direction: 'vertical', // スライダーを縦向きに
})

以上覚書でした。
その都度なにかあれば書き足したいです。