Swiperが動かない、動きはするけどカクついたり表示位置がズレたりする時の原因と対処法

アバター画像 sakurai

6

こんにちは。
櫻井です。
先日、Swiperを触る機会があったんですがなぜか動かなくなる現象が発生したので今回はその原因と解決方法を書き残したいと思います。

Swiperが動かない

loopとautoplayをtrueにしても動かないことがあります。
実はSwiperさん結構簡単に止まります。
JSとかあんまり関係なく、CSSのプロパティ一つで動かなくなったりもします。
それはswiperの親要素がgridかflexになっているかつ、centeredSlidesがfalseのままの時です。
詳しい原因はよくわかりませんがこれだけで動かなくなります。
正直意味がわかりません。。

See the Pen Swiper CSS etc. 1 by knap_develp (@knap_develp) on CodePen.

Swiperを動かすために

上記で動かなくなったswiperを動かす方法は簡単でgridもしくはflexを外せばいいだけです。
centeredSlidesをtrueにしても動くようになります。
overflow: visibleで外のスライドも見えるようにしていて、新たに追加されるスライドが見えて気になる時はスライドの枚数を増やすと解決します。

See the Pen Swiper CSS etc. 2 by knap_develp (@knap_develp) on CodePen.

Swiperがカクついたり表示位置がズレたりする

途中までちゃんと動くのにいきなりわけわからんところに飛んで行ったりすることがありました。
これまたなんで?って感じでしたがこれもCSSが原因でした。
よくよく考えれば当然なんですがswiper-wrapperにjustify-content: centerやgap: 40pxを指定したりするとおかしくなります。

Swiperからしたらプロパティ用意してあるんだからそっち使えってことなんでしょう。

めちゃくちゃな動きします。

See the Pen Swiper CSS etc. 3 by knap_develp (@knap_develp) on CodePen.

Swiperがカクついたり表示位置がズレたりする時の直し方

直し方はCSSじゃなくてプロパティ使ってあげればOKです。
justify-content: centerを使いたい場合はcenteredSlides: trueに、gap: 40pxを使いたいときはspaceBetween: 40にしてあげればいいです。

See the Pen Swiper CSS etc. 4 by knap_develp (@knap_develp) on CodePen.

まとめ

Swiperをいじる時はあんまりCSSに頼らない方がよさそう。
これに気づくのに僕は半日費やしました。

アバター画像

ぽちっとおうえん!

シェア

  • Facebook
  • LINE
  • X
STUDIOとNotionをAPI連携してギャラリーサイトを作ってみた。連携方法やメリットを紹介 SVGとCSSで作る手書き風テキストアニメ【後編】