Swiper.jsのautoplayが効かない

画像やコンテンツのスライドショーが簡単にできるJavaScriptライブラリー「Swiper.js」のautoplayオプションが効かなくて、しばらく迷走した時の話。

現象

「Swiper.js」をnpmでインストールして以下のようにインポートをして使っていたのですが、autoplayオプションが効かなかった。

// import modules:
import Swiper, { Navigation, Pagination } from 'swiper';

// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);

// import styles
import 'swiper/swiper-bundle.css';

// init Swiper:
const swiper = new Swiper('.swiper-container', {
    autoplay: {
        delay: 5000
    },
});

原因

autoplayモジュールをインポートしていなかった。＿|￣|○

修正

以下のように、autoplayモジュールを追加する。

// import modules:
import Swiper, { Navigation, Pagination, Autoplay } from 'swiper';

// configure Swiper to use modules
Swiper.use([Navigation, Pagination, Autoplay]);

すべてのモジュールを読み込む場合

// import Swiper bundle with all modules installed
import Swiper from'swiper/bundle';

まとめ

どこかのサイトからコードをコピーして使っていたので、インポート部分でモジュール別に読み込んでいる事にしばらく気づかなかった。。。

コピペも楽だけど、コードの内容をちゃんと理解して持ってこないと後で厄介な事になりますね（反省）