スライダーのドットはスライドが何枚あるかが分かり、見せたい側も見たい側も便利な要素です。
最近はただのドットではなく、サムネイルで内容が見られたり、あとどのくらいで切り替わるか分かったり、デザインも機能も多彩になったように思います。
今回は最近気になったドットデザイン3件と実装の参考になるサイトをまとめました。
目次
1.プログレスバー+スライド表示中はバーが他より大きい
任天堂 https://www.nintendo.co.jp/
プログレスバー=処理などの進捗状況を視覚・直感的に表示するものです。
切り替わるまでの時間がわかるので、見ようとしたら別のスライドに移ってしまうストレスが軽減されます。
見た目はシンプルですが、ちょっとした動きがWEBページをリッチに仕上げてくれそうです。
- 参考(Swiper)
【デモあり】Swiperでプログレスバーを実装する方法
https://tane-be.co.jp/knowledge/web-design/1151/ - 参考(Slick)
超有名スライダープラグインslickのエンドロール的な使い方とプログレスバーのカスタムについて
https://uhaha.net/slick/
2.ドットがサムネイル+アウトラインが表示時間にあわせて動く
ミスタードーナツ https://www.misterdonut.jp/
ひとめでスライダーの中身がわかり、気になったものを見ることができます。
またサムネイルの内容にもよりますが、色が多くなるのでポップな印象です。
- 参考(Swiper)
ページネーションを円形のプログレスバーにしたSwiperスライダーを実装してみる(備忘録)
https://freefuntimes.com/?p=808 - 参考(Slick)
スライダーのドットナビゲーションにプログレスバーを付与したい
https://zenn.dev/kazuki_tam/scraps/669ab96309e59c
3.その企業の商品・特徴をドットにする
スシロー(お持ち帰りネット注文) https://takeout.akindo-sushiro.co.jp/
お寿司です。最高ですね。
以上、最近気になるスライダードットデザイン&実装参考サイトでした。