こんにちは。
櫻井です。
先日、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に頼らない方がよさそう。
これに気づくのに僕は半日費やしました。
