jQueryでリキッドカルーセルUIに自動スライド機能を追加してみる実験

2012/04/11 TAGS :Gallery, jQuery, カルーセル, スライド

先日「jQueryでリキッド対応のカルーセルUIを作成する実験」と題して、
ブラウザのサイズによって可変するリキッドカルーセルパネルUIの実装方法を紹介しましたが
その動作に自動でスライドする機能を追加したパターンを作成してみたので紹介してみます。

まずは動作サンプルから。

jQueryでリキッドカルーセルUIに自動スライド機能を追加してみる実験

このブログ自体がリキッドレイアウトではないので実際の動作は下記の別枠表示から。

リキッド対応カルーセルサンプルを別枠で表示※表示後、ブラウザの枠を伸び縮みさせてみてください。

並べられたコンテンツ要素（画像）は一定時間（サンプルでは5秒）ごとにスライドし
左右の「≪」「≫」のボタンでも一つずつスライドさせることが可能です。
ブラウザのサイズによって画面上に表示されるコンテンツ要素の個数が変化します。

この動作の全体構成について、
HTML構成は前回の記事と変わりありません。

◆HTML
<div id="carousel">
<ul class="liquidlist">
<li><a href="#"><img src="img/photo01.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="#"><img src="img/photo02.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="#"><img src="img/photo03.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="#"><img src="img/photo04.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="#"><img src="img/photo05.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="#"><img src="img/photo06.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="#"><img src="img/photo07.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="#"><img src="img/photo08.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="#"><img src="img/photo09.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><!--/#carousel-->

大枠を任意のIDで覆い（サンプルでは「#carousel」とします）、
そのブロック要素に＜ul＞のリストを入れ込みます。
＜ul＞にはクラス「.liquidlist」を付けます。

このリストの＜li＞が一つのコンテンツ要素となります。
スライドさせるコンテンツ要素を増やしたり減らしたりする時には、
HTML側で単純に＜li＞の数を変更すればいいだけになっています。

CSSも前回の記事と変わりありませんが
念の為、記載しておきます。

◆CSS
#carousel {
	margin: 0 auto;
	width: 100%;
	height: 100px;
	text-align: left;
	position: relative;
}

#carousel_prev,
#carousel_next {
	top: 0;
	width: 20px;
	height: 100px;
	background: #000;
	cursor: pointer;
	position: absolute;
}
#carousel_prev {
	left: -20px;
	background:transparent url(../img/prev.jpg) no-repeat top left;
}
#carousel_next {
	right: -20px;
	background:transparent url(../img/next.jpg) no-repeat top left;
}

#carousel ul li {
	float: left;
	text-align: center;
	display: inline;
}


/* =======================================
	ClearFixElements
======================================= */
#carousel ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

#carousel ul {
	display: inline-block;
	overflow: hidden;
}

CSSではカルーセル大枠の高さは指定していますが
コンテンツ要素となるリスト＜li＞の幅などは指定せずに
スクリプト側から値を入れ込む形になります。

そして実際にオートスライド機能がついた動作を
実行させるスクリプトは以下の様になります。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var $setMainId = $('#carousel');
	var listBaseWidth = 100;
	var slideTime = 1000;
	var delayTime = 5000;

	$setMainId.each(function(){
		var carouselWidth = $(this).width();
		var carouselHeight = $(this).height();
		$(this).append('<div id="carousel_prev"></div><div id="carousel_next"></div>');
		$(this).children('ul').wrapAll('<div id="carousel_wrap"><div id="carousel_move"></div></div>');

		$(window).load(function(){
			$('#carousel_wrap').css({
				width: '100%',
				height: (carouselHeight),
				position: 'relative',
				overflow: 'hidden'
			});

			$('ul.liquidlist').each(function(){
				$(this).clone().prependTo('#carousel_move');
				$(this).clone().appendTo('#carousel_move');
			});

			var listCount = $('#carousel_move').children('ul').children('li').length;
			var ulWrap = $('#carousel_wrap').width();
			var ulNum = Math.floor(ulWrap / listBaseWidth);
			var liFixed = Math.floor(ulWrap / ulNum);
			$('ul.liquidlist li').css({width: (liFixed)});

			var ulWidth = (liFixed)*((listCount)/3);

			$('ul.liquidlist').css({width:(ulWidth),float:'left'});

			$('#carousel_move').css({
				top: '0',
				left: -(ulWidth),
				width: ((ulWidth)*3),
				height: (carouselHeight),
				position: 'absolute'
			});

			timerCarousel();
			listAdjust();

			function listAdjust(){
				clearInterval(setTimerCal);

				var cmPosLeft = parseInt($('#carousel_move').css('left'));
				var mvLiWidth = parseInt($('ul.liquidlist li').css('width'));
				var cmFrac = (cmPosLeft / mvLiWidth);

				var listCount = $('#carousel_move').children('ul').children('li').length;


				var ulWrap = $('#carousel_wrap').width();
				var ulNum = Math.floor(ulWrap / listBaseWidth);
				var liFixed = Math.floor(ulWrap / ulNum);
				$('ul.liquidlist li').css({width: (liFixed)});

				$('ul.liquidlist').css({width:((liFixed)*((listCount)/3))});

				var ulWidth = (liFixed)*((listCount)/3);

				$('ul.liquidlist').css({
					width: (ulWidth)
				});

				var cmFixedLeft = (liFixed * cmFrac);

				$('#carousel_move').css({
					left: (cmFixedLeft),
					width: ((ulWidth)*3)
				});

				timerCarousel();
			}

			$('#carousel_prev').click(function(){
				clearInterval(setTimerCal);
				var moveLengh = parseInt($('ul.liquidlist li').css('width'));
				$('#carousel_move:not(:animated)').animate({left: '+=' + (moveLengh)},slideTime,function(){
					carouselPosition();
					timerCarousel();
					listAdjust();
				});
			});

			$('#carousel_next').click(function(){
				clearInterval(setTimerCal);
				var moveLengh = parseInt($('ul.liquidlist li').css('width'));
				$('#carousel_move:not(:animated)').animate({left: '-=' + (moveLengh)},slideTime,function(){
					carouselPosition();
					timerCarousel();
					listAdjust();
				});
			});

			function carouselPosition(){
				var ulLeft = parseInt($('#carousel_move').css('left'));
				var stateUlWidth = parseInt($('ul.liquidlist').css('width'));
				var compWidth = (-(stateUlWidth)*2);

				if(ulLeft === compWidth) {
					$('#carousel_move').css({left:-(stateUlWidth)});
				} else if(ulLeft === 0) {
					$('#carousel_move').css({left:-(stateUlWidth)});
				};
			};

			$(window).resize(function(){
				$('#carousel_move:not(:animated)').each(function(){
					listAdjust();
				});
			});
		});

		function timerCarousel(){
			setTimerCal = setInterval(function(){
				$('#carousel_next').click();
			},delayTime + slideTime);
		};

	});
});
</script>

スクリプト開始部分にある
————————————————
var $setMainId = $(’#carousel’);
var listBaseWidth = 100;
var slideTime = 1000;
var delayTime = 5000;
————————————————
は上から、
「$setMainId」では該当するメインエリアのID名を記載。

「listBaseWidth」はコンテンツ要素の＜li＞リスト幅の最低値になるので
ここにはコンテンツ要素＜li＞のベースとなるwidthの値を入れます。

「slideTime」は左右の「≪」「≫」のボタンでスライドする際の
アニメーションスピードになります。（値を大きくするとゆっくりスライドします。）

「delayTime」は自動スライドする際の実行間隔になります。
値が「5000」の場合は5秒ごとにスライドします。

これらの値を変更することでカスタマイズも可能です。

ページロード時とブラウザ枠をリサイズするごとに
リストの幅を「listBaseWidth」の値を元に表示個数や位置を再計算して、
それぞれ値を入れ直しています。

サンプルのカルーセルパネルはブラウザ枠の目いっぱいに広がっていますが
幅指定が％で指定されているリキッドレイアウト構成のWebページ上ならば
カラム分けしてあるレイアウトなどにも組み込むことも可能です。

スライドアニメーション中にブラウザをリサイズされた際に
全ての値を計算し直すところで苦戦しましたが
なんとかブラウザをどう動かしても誤動作しないように調整してあります。（たぶん。。。）

自動スライド機能のついたリキッド対応のカルーセルパネルUIが必要になった際のご参考に是非。。

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