仙台のホームページ制作・システム開発・ウェブコンサルティングはアド・エータイプへ。

繰り返し画像を横にスクロールさせるjQueryプラグイン「infiniteSlide」

公開日:

jQuery

繰り返し画像を横にスクロールさせるjQueryプラグイン「infiniteSlide」

 

今回はjQueryのプラグイン「infiniteSlide」をご紹介します。

 

「infiniteSlide」は横方向に繰り返し画像をスクロールさせることができるプラグインです。
WEBサイトのメイン画像などは複数の画像を使用して、自動で繰り返しスライドさせたいということがあると思います。

 

jQueryのプラグインでも画像をスライドさせる物はたくさん存在しますが、
とてもシンプルで活用できそうだったので下記に使用方法を記載します。

 

 

「infiniteSlide」で無限に画像をスクロールする方法

下記のページから「infiniteSlide」をダウンロードします。

 

https://github.com/woodroots/infiniteslide

 

ファイル読込

jQuery、ダウンロードした「infiniteSlide」を読み込みます。

 

HTML

下記のようにスクロールさせる画像を用意します。

画像にリンクを貼ることも可能です。

 

CSS

スクロールさせる要素のリストタグに下記のスタイルを適用させます。

 

JS

スクロールさせる要素を指定します。

 

オプションを指定する場合は、下記のように記述します。

「pauseonhover」を「true」にすれば、マウスオーバーでスクロールを止めることができます。

 

サンプル

下記に、「infiniteSlide」を使用して無限に画像をスクロールさせてみました。
シンプルでとても使いやすいです。

 

「infiniteSlide」を使用したデモページ

 

 

まとめ

複数の画像をスライドさせるプラグインは色々ありますが、このプラグインは非常にシンプルで簡単に設置することができます。
WEBサイトで無限に画像をスクロールさせたい場合におすすめなプラグインです。

 

WEB制作時に色々と活用できそうです!

ブログ作成者3
  • このエントリーをはてなブックマークに追加

ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください!

お気軽にご相談ください。
022-716-3883
営業時間 平日9:30~18:00