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

公開日：2014/12/02

jQuery スクロールプラグイン

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

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

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

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

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

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

https://github.com/woodroots/infiniteslide

ファイル読込

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="infiniteslide.js"></script>
<script type="text/javascript" src="jquery.pause.min.js"></script>

HTML

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

<div id="main_slide">
	<ul>
		<li><a href="http://www.dataplan.jp/"><img src="img/sample1.jpg" alt="" width="800" height="400" /></a></li>
		<li><img src="img/sample2.jpg" alt="" width="800" height="400" /></li>
		<li><img src="img/sample3.jpg" alt="" width="800" height="400" /></li>
		<li><img src="img/sample4.jpg" alt="" width="800" height="400" /></li>
	</ul>
</div>

<ul>

</ul>

</div>

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

CSS

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

<style type="text/css">
ul,li {
	list-style: none;
	margin: 0;
	padding: 0;
}
</style>

ul,li {

list-style: none;

margin: 0;

padding: 0;

}

</style>

JS

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

<script type="text/javascript">
$(function(){
	$('#main_slide').infiniteslide();
});
</script>

$(function(){

$('#main_slide').infiniteslide();

});

</script>

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

<script type="text/javascript">
$(function(){
	$('#main_slide').infiniteslide({
		'height': 400,			// 高さを指定
		'speed': 30,			// スピードを指定
		'direction' : 'left',	// スライドする向きを指定
		'pauseonhover': false	// マウスオーバーでストップするかを指定
	});
});
</script>