swiperのスライドが動かない。
Q&AClosed
解決したいこと
swiperを導入したものの、スライドが動きません。
1枚目のスライド自体は表示されていて、CSSも効いていますが、ページネーションをクリックしても無反応です。
デベロッパーツールで見ると、2・３枚目のスライドは画面の右側に配置はされています。
よりわからないのが、ごく稀に何も修正していないのに動くこともあります。。。
発生している問題・エラー
エラーメッセージは出ていません。
該当するソースコード
HTML
<head>
<!-- charset -->
<!-- viewport -->
<!-- title -->
<!-- リセットCSS -->
<!-- swiper -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
<!-- スタイルシート -->
<!-- googleフォント -->
</head>
...
<!------------ scriptタグ ------------>
<script defer src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
</body>
JavaScript
// ---------- Swiperの設定 ----------
// スライド時にfadeをかける
const swiper = new Swiper('.swiper', {
effect: 'fade',
fadeEffect: { crossFade: true},
// paginationをつける
pagination: {
el: '.swiper-pagination',
},
// 「次へ」「戻る」ボタンをつける
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
自分で試したこと
・コードの見直し
・公式の解説確認
・別ブラウザでの検証
・他のJSイベント（Intersection Observer）との関連性確認
・CDNのURLの先頭を //から記載
0