SwiperのspaceBetweenはちょっと罠かもしれない
Swiperについては説明不要な有名なプラグインですね。
パソコン版でもスマホのようにドラッグでスワイプ操作が可能となり、簡単にカルーセルが実装できることから多くのWeb開発者から支持を得ています。
その中で、Swiperの spaceBetween というオプションの扱いに気をつけた方が良さそうだと思ったので記事を書いています。
0. spaceBetween とは
spaceBetween オプションはスライドとスライドの間を指定した値だけ間隔を開けてくれます。
1. なんで spaceBetween の扱いに気をつけた方がいいのか？
例として下記のサイトをご覧ください。（Swiper採用のサイトであればどこでもいいんですが。）
「コレクション新作アイテム」という箇所にSwiperが使われています。
上記に赤で示した隙間でスワイプをしてみてください。
すると、最初の2枚のスライドは問題なくスワイプできますが、 画面外のスライドになった途端スワイプができない ことに気づくかと思います。
また、スワイプができないだけではなく、 スライドの中のテキストが選択状態になり画面が荒れて しまいます。選択状態を解除するためにどこかクリックして解除しなければなりません。
これが地味に操作性を悪化させています。
かなり小さな問題ではありますが、若干のストレスを与える可能性があるため解決したい問題だと個人的には思います。
僕が観測する上では9割以上のサイトでこの問題が起きていました。
このサイトは隙間が小さいのでそれほど操作性に影響はありませんが、特に大きな隙間を持つデザインの場合には気をつけたいポイントです。
2. どうやって解決するか。
spaceBetween オプションを使わずに、 .swiper-slide に padding-left と padding-right を指定しておきましょう。
スライダーの両端がpadding分膨れ上がってしまうので相殺する必要があります。paddingを指定した分を .swiper-wrapper の margin-left と margin-right に -◯◯px すればOKです。（padding-leftとpadding-rightが20pxならば、margin-leftとmargin-rightは-20pxを指定するだけ。）
これだけでかなり快適な操作性へと改善できます。
2-1. この修正が手間なら別の手段があります
上記の修正がコスト的に辛ければ、別の手段として .swiper に対して user-select: none を適用しておきましょう。
これを反映しておくと隙間を掴んでしまった場合にもスライドの中身が選択状態にならず画面が荒れません。ユーザーとしては「あれ？」ぐらいで済むのでストレスを軽減させることができることでしょう。
さいごに
問題としては小さいですが、細部にもこだわって実装していきたいですね！
Discussion