東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

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

2016.11.25 Posted by

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

まずはどのようなスライダーなのか、作成した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

以上、技術メモでした。

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278