Swiper リサイズしないと動作しない 解決策
この記事はswiper バージョン4以下の書き方です。
全ては以下のリンクに書いてあります。
日本語で検索すると、あまり記事が出てこなかったのでここにリンクを貼らせていただきます。
https://stackoverflow.com/questions/43770106/swiper-slider-not-working-unless-page-is-resized
以下のように検索すると、解決策がたくさん出てきます。
”swiper not working until resize”
以下の1〜3のどれかを試してみると良いようです。
(筆者は、3で解決できました。)
以下は、参考リンクの内容をもとに、自分なりに説明を加えたものです、
https://stackoverflow.com/questions/43770106/swiper-slider-not-working-unless-page-is-resized
簡潔に解決方法
1スライダーを初期化する
var hensu = new Swiper('.hensu', {
//////初期化コードをかく
})
2スライダーを更新する
hensu.update();
3オブザーバーパラメータを有効にする
※以下を、ファイル内の、全ての初期化コードのまとまりに設定する必要がある。
一つの初期化コードに設定下のみだと、解決しないです。
var hensu = new Swiper('.hensu', {
//////初期化コード
loop: true,
autoplay: 5000,
,,,,
/////以下の二つのラインを追加する//////
observer: true,
observeParents: true,
})
※複数の初期化コードがある場合、全ての初期化コードのまとまりごとに、二行のラインを追加する必要あり。
var hensu2 = new Swiper('.hensu2', {
//////初期化コード
loop: true,
autoplay: 5000,
,,,,
/////全ての初期化コードのまとまりに以下の二つのラインを追加する//////
observer: true,
observeParents: true,
})
参考になれば幸いです。^^
解決策の参考です。
[Swiper slider not working unless page is resized]
https://stackoverflow.com/questions/43770106/swiper-slider-not-working-unless-page-is-resized
[Swiper not working until I resize browser window #2928]
https://github.com/nolimits4web/swiper/issues/2928
[スライダープラグイン Swiper の使い方]
https://www.webdesignleaves.com/pr/plugins/swiper_js.html