jQueryで簡単にコンテンツスライダーを実装してみよう。

Author

トッド(Todd)

どうも、トッドです。

以前、Swiperを用いて簡単かつクオリティのあるスライダーが作れるよ…という内容を書いたのですけど、やっぱり自分でコードを書いて作成できる方がメンテナンスやら改良ってところを考えるとき融通が利いて良さげだろう?と思いましてベーシックな

って言っても、(結構かっこ良い感じのもの)

ナビゲーション付きで、オートプレイタイプのコンテンツスライダーを作成したので今回はその内容について紹介したいと思います。


そもそもコンテンツスライダーって何なのさ?

正直なところ正式名称がコレなのかは把握していないのだけど、ここで紹介するモノは以下の動画を見ていただくとイメージが掴めるかと思います。

よく見かけるのは、クリックしたらスライドするやつなんですけど、今回のはオートプレイ仕様でクリックイベントは無いです。

何秒たったらスライドっていう感じになっています…

コンテンツスライダーのcodeと解説!!

完成物のコード&デモはこんな感じになっています。↓

See the Pen (jQuery)Basic Content Slider</a > by Todd (@threefrog) on CodePen.</span >

HTMLについて

HTMLはすごくシンプルです。表示させたいコンテンツを今回は×3つ用意したのちに同じ構成のダミーを1つ用意した構成になっています。

4つ目のダミーと表した要素がポイントになっているんですけど、ここは後で説明したいと思います。

CSSについて

ここで紹介しているスライダーの本質を解くと、可視可能な窓から4つの要素を横並べしたものを眺めている。というのが肝です。つまり、窓からしか4つ並びになっている要素を視認ことが出来ないようにした上でスライドさせているということです。

.sliderを見てもらうと分かるように、「overflow:hidden;」これが指定されていることで4つならびの要素が視認出来ない状態になっています。

試しに「overflow: hidden;」を消してみると分かりやすいかもしれませんね。

JavaScriptについて(jQuery)

JavascriptやらjQueryって難しいよなぁ〜…

そう言いたくなる気持ち、分かります。でも、今回のコンテンツスライダーの場合は意外と簡単に分かっちゃたりします。

というのも、このスライダーに関して言えば、Javascript(jQuery)が役割を担っている概要は、○秒たったら1要素あたりのwidth分だけanimationさせている(marginLeft)。その時に、カウントを1プラスして、カウンターによる条件分岐でスライド下部にあるチョボチョボの背景色を変更する。

というような仕組みになっています。たぶん、分かりにくいなぁ〜なんて思われるでしょう。

それとダミー要素の話なんですが、一方から「marginLeft」でスライドさせているので、最初の要素に戻ってくるのにどうしてもこの作りの場合、全体をスライドさせて戻す必要が出てきます。その時に、ダミー要素マイナス1番目の要素がスライドの演出を支えています。

まぁ、他人が書くコードって癖があるから、いや、ココはこうでしょ。みたいな事ってあるよね。そんなご指摘も喜んで待っています!!


一応、読み解くヒントになればなぁ…という気持ちでザックリ書いてみました。

あと、言い忘れてたけどアイコンは安定の「FontAwesome」です。

はい、という感じで長々と書かしてもらいました。また、何か作ったら紹介しますね。

最後まで読んでいただきありがとう!!よかったらYoutubeにてボタンやらのカスタムコードを紹介しているので見にきてくれると嬉しいです。おわり…

コメントを残す

メールアドレスが公開されることはありません。