無限ループさせるスライダーを実装する

こんにちは、ウェブラボ技術メモです。
今回はコンテンツ要素を無限ループさせるスライダーを実装してみたいと思います。

まずはどのようなスライダーなのか、作成したDEMOをご覧ください。

横並びになっている5個の画像が自動でスライドしているのがわかりますね。

実装にあたってこちらの紹介ページを参考にさせていただきました。

http://black-flag.net/jquery/20110707-3305.html

それでは実装まで解説していきます。

まずはhead内でjquery本体と動作に必要なCSSを読み込ませ、

動作させるためのスクリプトを記述します。
■スクリプト

次にスライダーさせるコンテンツ要素をHTMLに記述します。

■HTML

最後にHTMLに対応したCSSを記述します。

■CSS

スライダーの速度設定は、「function loopsliderPosition()」の中にある

2つの「25000」の値を変更させることで調節できます。
この値は「<ul>」の要素全体が、「#loopslider」の端から端まで、何ミリ秒で移動するかを意味しています。
そのため、スライドさせるコンテンツ要素の横幅が大きいほど、早くスライドします。

今回は自動で一方向に流れる無限ループスライダーを紹介いたしましたが

スクリプト部分やCSS部分の記述を変更・追加することで、
以下のような動作を実装することができます。
  • コンテンツ要素にマウスオーバーするとスライダーがストップする
  • スライダーの左右に設置したボタンでスライドの向きを変化させる

これらの動作については、今回ご紹介させていただいたブログの下記ページにて紹介されています。

http://black-flag.net/jquery/20111214-3623.html

以上、技術メモでした。

  • このページを共有する