javascript(ジャバスクリプト)で円形のスライダーを自作してみました。【javascript circleslider】

slider carouselを実装しcirclesliderと同期させる

slider carousel実装に必要なコードを一部抜き出して表示します。

スライダーカルーセルを動かすのに必要なメソッドはslide()、set_timer()、start_timer()の3つです。

スライダーカルーセルの移動はslide()関数内で行っています。

重要なのは、circle_slide() 関数が1回の呼び出しで円形スライダーを1°移動させていたのに対して、slide()関数が1回呼び出された時のスライダーカルーセルの移動距離(px)を合わせることです。

slide()関数が1回呼び出された時のカルーセルの移動距離は、「カルセールスライダー1個分の画像が0から見えなくなるまで移動する距離(ここでは300px)」を「円形のスライダーが現在の位置から隣の位置へ移動するまでにcircle_slide()関数が何回呼びだされるか(ここでは72)」で割れば求められます。

slide()関数内でそれをおこなっているのが settings.slide_start += (width / slidesAngle);の行の(width / slidesAngle)の部分です。

正直、これだけです (∩.∩)

ここではsettings.slide_startに必ずしもジャストな数値が入ってくるわけではないので最後に細工します。

settings.slide_startに入る数値が画像1個の幅に足らなければ、Math.ceil((settings.slide_start)で settings.slide_startの値を切り上げます。オーバーした時は、画像1個の幅を代入します。

ここでもモジュロ演算を使って「画像1個の幅*画像数」以上の数値は入らないようにしています。

slide()関数だけ作れば後はcircle_slide()関数と同じです。set_timer()で画像1個分移動して、start_timer() で繰り返します。

これでスライダーカルーセルの実装の解説は終わりです。次は円形スライダーのcssでのスタイリングを簡単に確認したいと思います。

circlesliderのスタイリングをcssで設定する

始めにstylesheetを示しておきます。

CSS

始めにpositonプロパティーを使用して、createDocumentFragment()で構築したviewport、round、thumのそれぞれのドキュメントを#area上に重ねます。

move()関数でcurrentクラスが与えられた場合、borderを設定します。

後は通常のスタイリングと大差がないので割愛します。気になることがあれば確認して下さい。

circlesliderのレスポンシブ対応について

このプラグインを設定するセレクター(ここでは#area)のサイズ(width,height)によってcirclesliderに必要なドキュメントのサイズは変化するようにプラグインを記述してあります。必要に応じてcssのメディアクエリーでセレクター(ここでは#area)のサイズを再設定すると必要なドキュメントはすべて変化するので、様々なデバイスに対応できると思います。確認してみてください。

javascript(ジャバスクリプト)でcircleslider(円形のスライダー)を自作してみました。まとめ

javascript(jquery)でcirclesliderを制作し解説させて頂きました。いかがだったでしょうか?。モジュロ演算などゲームのjavascriptを記述するときなども使えると思うのでいろいろ試してみてください。多少産みの苦しみはありましたが、終わってみるとこの世界はやっぱり楽しいなと思ってます。それではまた。

おススメ関連記事

コメント

0

コメントして下さい

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です