自作スワイプ式スライダー

画像スライダーはボタンを押すか、一定時間の経過で表示する画像を切り替えるのが一般的です。でも、今回はドラッグ＆ドロップで滑らかに画像を切り替えるタイプを作ってみました。スマホでスワイプする様な感覚で使えます。

←画像をスワイプして選択できるスライダー→

このタイプのメリットはボタンクリックよりも素早く直感的に画像を切り替えられるのと、単純に挙動が面白い点にあるかもしれません。スワイプすると、強さに応じて画像がスライドしまます。今回は始点と終点でスライドが止まるようになっていますが、ループ仕様にしてクルクルさせても面白そうです。

スワイプ式スライダーの使い方

サムネイルをスライドさせて、選択したものを拡大表示するのが今回の仕様です。大きな画像をスライドさせて、トップページなどに配置しているものも見当たります。

HTMLとCSSでレイアウトを作り、動作制御はJAVASCRIPTで行っています。スライダー部分は横方向に画像を並べており、そのうち一部だけ表示。はみ出した部分は、隠しています。

移動に関しては、複数の画像を一つのDIV要素にまとめ、丸ごとスライドさせています。ループ仕様にするには、各画像を一つずつDIV要素に入れておく必要性があるかもしれません。

今回のスワイプ式スライダーの改善ポイント

練習で作ったため、画像数や画像のサイズを変更に弱い状態です。もう少し使いやすいように改良してから、ソースコードを紹介したいと思っています。

まとめ

スワイプできるスライダーの紹介でした。