0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Swiper リサイズしないと動作しない 解決策

Posted at

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?