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>

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

setElm = $(‘.loopSlider’) スライド全体を囲うブロック要素(IDでも可)
slideSpeed = 2000 一つのリスト要素がスライド移動する時間

「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>

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

setElm = $(‘.loopSlider’) スライド全体を囲うブロック要素(IDでも可)
slideSpeed = 2000 一つのリスト要素がスライド移動する時間

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

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

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

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

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

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

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

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (6)

  • fearon | 2016.08.11 10:50

    いつも参考にさせていただいております^ ^
    あとご質問があるんですが、
    画像上にテキストをつけて動かしたい場合はどうしたらいいでしょうか。。。

  • BlackFlag | 2016.08.13 11:13

    >fearonさん
    コメントありがとうございます。

    画像の上にテキストをつけるには
    スクリプトにはとくに影響ありませんので
    HTMLのリスト内にテキストを追加し
    CSSで配置位置などの調整をすることで実装可能です。

    お試しください。
    よろしくお願いします。

  • monkey | 2016.10.17 21:44

    いつもありがとうございます。
    質問なのですが、
    width=”100%”で、横幅フルで表示がしたいのですが、
    良い方法があればご教示願いたいです。

  • BlackFlag | 2016.10.21 1:45

    >monkeyさん
    コメントありがとうございます。

    スライダーを幅100%にするには
    「.loopSlider」のwidthの値を100%にすることで可能となります。

    ただし、構成上スライドする要素の総幅が
    「.loopSlider」の幅よりも大きくないと動作しませんので
    スライドさせる要素が少ない場合は
    スライド動作しなくなってしまうことがあるので
    中の要素の数や大きさ調整をしていただければと思います。

    お試しください。
    よろしくお願いします。

  • Holga | 2017.01.19 19:57

    いつも本当に、ありがとうございます。

    1つ質問させていただきたいのですが
    スワイプ処理などで、前後にカルーセルを動かす処理を付けたいのですが
    可能でしょうか?

    もし何かいい方法があれば教えていただきたいです。

  • BlackFlag | 2017.01.22 9:43

    >Holgaさん
    コメントありがとうございます。

    ご質問いただきましたスワイプ処理についてですが
    もともとそのような動作を想定していない構成になっているので
    多少の調整では実現が厳しいかと思っております…

    またその様な仕様でのスライダーのサンプルができましたら
    ここで紹介させていただきたいと思います。

    よろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR