jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法

5年ほど前にもWebページ上の要素がスライドアニメーションによって流れ続けるループスライダーのスクリプトを紹介しましたが、ブラウザによってスライド動作を長時間続けると動作が重くなったり、いくつか懸念点があったので、そのような懸念点の改善とスクリプト全体をよりシンプルな構成にしたものを紹介してみます。

【横スライドパターン】
jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法

「横スライドパターン：jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法」サンプルを別枠で表示

まずは横方向にスライドするパターンの実装についてです。

Webページに横に並べられた要素が右から左へ流れ続けます。
動作自体はただひたすら要素が流れ続けるシンプルなものです。
スライド全体にマウスオーバーした際には、スライド動作を一時的に止め、マウスアウトするとスライドが再開します。

全体構成についてまずはHTMLから。

◆HTML
<div class="loopSlider">
<ul>
<li><a href="#"><img src="img/photo1.jpg" width="100" height="100" alt=""></a></li>
<li><a href="#"><img src="img/photo2.jpg" width="100" height="100" alt=""></a></li>
<li><a href="#"><img src="img/photo3.jpg" width="100" height="100" alt=""></a></li>
<li><a href="#"><img src="img/photo4.jpg" width="100" height="100" alt=""></a></li>
<li><a href="#"><img src="img/photo5.jpg" width="100" height="100" alt=""></a></li>
<li><a href="#"><img src="img/photo6.jpg" width="100" height="100" alt=""></a></li>
<li><a href="#"><img src="img/photo7.jpg" width="100" height="100" alt=""></a></li>
<li><a href="#"><img src="img/photo8.jpg" width="100" height="100" alt=""></a></li>
<li><a href="#"><img src="img/photo9.jpg" width="100" height="100" alt=""></a></li>
<li><a href="#"><img src="img/photo10.jpg" width="100" height="100" alt=""></a></li>
</ul>
</div><!--/.loopSlider-->

スライド動作させる要素は＜ul＞を使ってリストで構成し、そのリスト全体は任意のブロック要素で囲います。

リストの中の要素に＜a＞タグでリンクを貼っていますが、これは動作自体には特に影響しないものになるので不要な場合は外してしまって問題ありません。

この要素に対してCSSは以下のように指定します。

◆CSS
/* ------------------------------
   loopSlider
------------------------------ */
.loopSliderWrap {
	top: 0;
	left: 0;
	height: 100px;
	overflow: hidden;
	position: absolute;
}

.loopSlider {
	margin: 0 auto;
	width: 500px;
	height: 100px;
	text-align: left;
	position: relative;
	overflow: hidden;
}

.loopSlider ul {
	height: 100px;
	float: left;
	overflow: hidden;
}

.loopSlider ul li {
	width: 100px;
	height: 100px;
	float: left;
	display: inline;
	overflow: hidden;
}

/* ------------------------------
   CLEARFIX ELEMENTS
------------------------------ */
.loopSliderWrap:after {
	content: "";
	display: none;
	clear: none;
}

一番最初にある「.loopSliderWrap」はスクリプト側から生成するブロック要素になり、このセレクタに対しては表示するスライダーの高さを指定しておきます。

HTML側でリスト全体を囲んだブロック要素「.loopSlider」には、要素がスライドする際の、表示する領域の幅と高さを指定します。

中の＜ul＞や＜li＞といったリスト要素は「float」を使って横に並べるようにします。

そして、実際の横方向にスライドするループスライド動作スクリプトは以下の様になります。

◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="js/jquery.pause.min.js"></script>
<script>
$(function(){
	var setElm = $('.loopSlider'),
	slideSpeed = 2000;

	setElm.each(function(){
		var self = $(this),
		selfWidth = self.innerWidth(),
		findUl = self.find('ul'),
		findLi = findUl.find('li'),
		listWidth = findLi.outerWidth(),
		listCount = findLi.length,
		loopWidth = listWidth * listCount;

		findUl.wrapAll('<div class="loopSliderWrap" />');
		var selfWrap = self.find('.loopSliderWrap');

		if(loopWidth > selfWidth){
			findUl.css({width:loopWidth}).clone().appendTo(selfWrap);

			selfWrap.css({width:loopWidth*2});

			function loopMove(){
				selfWrap.animate({left:'-' + (loopWidth) + 'px'},slideSpeed*listCount,'linear',function(){
					selfWrap.css({left:'0'});
					loopMove();
				});
			};
			loopMove();

			setElm.hover(function() {
				selfWrap.pause();
			}, function() {
				selfWrap.resume();
			});
		}
	});
});
</script>

スクリプト開始部分にある設定値の内容は以下の様になっています。

「slideSpeed」はリスト一つが横に移動する時間になり、スライド全体が移動するアニメーション時間はここで指定した値×リスト数となります。
スピードを早めるには値を小さくし、ゆっくりさせる場合には値を大きくします。

「setElm」で指定した要素がマスク的な役割をし、その中に入る＜ul＞リスト要素全体を「.loopSliderWrap」の名前のブロック要素で覆い、「left」の値を操作してアニメーションさせスライド移動させています。

マウスオーバーでのストップ動作はjQueryアニメーションを一時停止、再開させることができる「jquery.pause.js」プラグインを使用しています。

Pause：A jQuery plugin to pause and resume animations

マウスオーバーのストップ動作はスクリプトの34行目～38行目になるのでこの動作が不要な場合にはこの部分を削除し、3行目で読み込んでいる「jquery.pause.js」プラグインファイル自体も読み込まないようにしてください。

【縦スライドパターン】
jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法

「縦スライドパターン：jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法」サンプルを別枠で表示

続いて、縦方向にスライドするパターンの実装について。

Webページに縦に並べられた要素が下から上へ流れ続けます。
こちらの動作自体も横タイプと同様にただひたすら要素が下から上に流れ続けるシンプルなものです。
横スライドパターン同様に、スライド全体にマウスオーバーした際にはスライド動作を一時的に止め、マウスアウトするとスライドが再開します。

全体構成について、HTMLは横スライドパターンと同じになるので説明は省略します。

CSSは以下のように指定します。

◆CSS
/* ------------------------------
   loopSlider
------------------------------ */
.loopSliderWrap {
	top: 0;
	left: 0;
	width: 100px;
	overflow: hidden;
	position: absolute;
}

.loopSlider {
	margin: 0 auto;
	width: 100px;
	height: 500px;
	text-align: left;
	position: relative;
	overflow: hidden;
}

.loopSlider ul {
	width: 100px;
	overflow: hidden;
}

.loopSlider ul li {
	width: 100px;
	height: 100px;
	overflow: hidden;
}

CSSもほぼ横スライドパターンと同じですが、こちらではリストに対して「float」などは指定しないで通常の縦並びにしておきます。

HTML側でリスト全体を囲んだブロック要素「.loopSlider」には、要素が縦方向にスライドする際の、表示する領域の幅と高さを指定します。

そして実際の縦方向のループスライド動作スクリプトは以下の様になります。

◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="js/jquery.pause.min.js"></script>
<script>
$(function(){
	var setElm = $('.loopSlider'),
	slideSpeed = 2000;

	setElm.each(function(){
		var self = $(this),
		selfHeight = self.innerHeight(),
		findUl = self.find('ul'),
		findLi = findUl.find('li'),
		listHeight = findLi.outerHeight(),
		listCount = findLi.length,
		loopHeight = listHeight * listCount;

		findUl.wrapAll('<div class="loopSliderWrap" />');
		var selfWrap = self.find('.loopSliderWrap');

		if(loopHeight > selfHeight){
			findUl.css({height:loopHeight}).clone().appendTo(selfWrap);

			selfWrap.css({height:loopHeight*2});

			function loopMove(){
				selfWrap.animate({top:'-' + (loopHeight) + 'px'},slideSpeed*listCount,'linear',function(){
					selfWrap.css({top:'0'});
					loopMove();
				});
			};
			loopMove();

			setElm.hover(function() {
				selfWrap.pause();
			}, function() {
				selfWrap.resume();
			});
		}
	});
});
</script>

スクリプト開始部分にある設定値の内容は以下の様になっています。

横スライドのパターンと同様に「slideSpeed」はリスト一つが縦に移動する時間になり、スライド全体が移動するアニメーション時間は、ここで指定した値×リスト数となります。
スピードを早めるには値を小さくし、ゆっくりさせる場合には値を大きくします。

「setElm」で指定した要素がマスク的な役割をし、その中に入る＜ul＞リスト要素全体を覆う「.loopSliderWrap」の「top」の値を操作して縦方向にアニメーションさせスライド移動させています。

マウスオーバーでのストップ動作は「jquery.pause.js」プラグインを使用します。

マウスオーバーのストップ動作はスクリプトの34行目～38行目になるのでこの動作が不要な場合には、3行目で読み込んでいる「jquery.pause.js」プラグインファイル自体も読み込まないようにしてください。

以上が横方向と縦方向の無限ループスライダーのシンプルな実装方法でした。

注目させたい商品が複数ある場合や、Webページ上に並べたいバナーが数多くあるときなど、ユーザーの目を惹きつける意味でもこのようなループスライダーは効果的かと思っています。

無限にループし続けるスライダーを設置する際にぜひ。。。

サンプルファイルをダウンロードしたい方はこちらから