全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
スライダー(slick)のドットをプログレスバーにする方法
2022.08.29
※この記事は2022年08月29日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
スライダープラグインの設置をする機会は多く、加えてドットのデザインを変更することもあると思います。
今回は、数あるスライダーの中でも凡庸性の高い「slick」を使用したスライダーのオプションのドットを利用して、次のスライド切り替えまでの経過をプログレスバーで表示する方法を紹介します。
- 1. javascriptで指定する方法
- 2. cssで指定する方法
javascriptで指定する方法
スライダーの設置の際、ドットをプログレスバーにするには、slickで育成されるドットのアクティブな状態ををプログレスバーに指定することで実現します。
動きはjavascriptで指定していますので、バーの色や表示などをCSSで整形します。
cssで指定する方法
このパターンでは、プログレスバーの動きをcssで指定しています。
slickで育成されるドットがアクティブになったら動きを発動します。
尚、最初の1枚目だけ切り替わりが早いので、その点をjavascriptでスライドスピードを調整しています。
まとめ
スライダーのスライドの進捗が視覚的に伝わる、プログレスバーの実装を紹介しました。
ドットのデザインをワンランクUPさせる、この方法をご活用ください。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
こんにちは。コーダーの兼山です。 前回は、reCAPTCHAを設置するために必要となる、GoogleへWEBサイト登録と…
こんにちは。コーダーの兼山です。 コーディング時にtableで表を組み込む際、レスポンシブコーディングなどでのスマートフ…
