先日「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が必要になった際のご参考に是非。。

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

SHARE

Comments (5)

  • myaa | 2013.05.29 5:41

    初めまして、javascript初心者でいつも参考にさせて頂いています。
    こちらのリキッドカルーセル、当方の環境だけなのかがわかりませんが
    全画面100%サイズで表示した際にulの内容が3回リピートされた後にしばらく、
    画像が引き続き表示されず画像が抜けたように表示されます。
    画像が表示されなくなった後、しばらく自動で動いて左画面にulの最後のliが消えていくと、
    急にぱっと抜けた部分にulの画像がまた表示され普通の表示に戻ります。

    こちらで公開されている以下のサンプルも同様に見えます。
    chromeやsafari、firefoxやIE8,9などでも同じです。
    https://black-flag.net/devel/jQueryLiquidCarouselAuto/jQueryLiquidCarouselAuto/

    よろしければこの現象が改善する方法を教えて頂ければ有難いです><;

    また、こちらもぜひ教えて頂きたいのですがlistBaseWidthに画像と同じ幅を加えても、
    画像の間に隙間ができてしまうのはなぜでしょうか?

    沢山の質問で申し訳ありません!
    どうぞよろしくお願い致します。

  • BlackFlag | 2013.06.03 2:58

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

    ご質問いただいた件についてですが
    このカルーセルはHTMLに書かれている
    <ul>リストをクローン(コピー)を生成して
    元のリストの前後に配置し
    合計3つのリストを動かして形成しています。

    ある程度の画面幅での想定はしていますが
    あまりにワイドな幅でのモニターで目いっぱい広げたような場合は
    見切れてしまうことはあるかもしれません。

    それを補うためにはクローン(コピー)を増やす手立てになりますが
    増やせば増やすほど動作に負荷が掛かることになるので
    あまりやりすぎはよくない気もしていますが
    後ろに増やすクローン(コピー)を3つにして
    合計5つのリストで動作させるパターンを用意してみましたので
    必要であれば下記URLよりダウンロードしてみてください。

    https://black-flag.net/devel/jQueryLiquidCarouselAuto/jQueryLiquidCarouselAutoClone5.zip

    listBaseWidthで指定した値は
    その値をベースにして現在表示しているブラウザ幅と計算して
    リストの幅を算出しているものになり
    サンプルではリストに対して画像を中央寄せにしているので
    余白分が発生しています。
    (listBaseWidthは画像の幅の値ではないです。)

    ご確認ください。
    よろしくお願いします。

  • 森本 | 2015.02.07 12:47

    こんにちは。javascriptに興味があって、使用させて頂いています。
    今回ワードプレスにjQueryLiquidCarouselAutoClone5を設定してサイトを作成しています。
    w140・H240の画像を3列で表示するようにしています。スマホでも可能なように、レスポンシブのテーマを使用しています。
    画像は全部で12枚ですが最後の所で1枚分の空白が出来ます。
    その現象は画像を増やしても同じです。必ず終わりの所で1マス分が空いて、次につながります。
    原因は解りませんが、解決の方法があればご教示頂ければありがたいです。
    どうぞよろしくお願い致します。

  • BlackFlag | 2015.02.10 1:44

    >森本さん
    コメントありがとうございます。
    当記事のリキッドカルーセルスクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    実装されている画面を確認できないと何とも言えないのですが
    当記事からダウンロードできるサンプルファイルでも
    同様の現象が起こっているのでしょうか。

    もしご実装されているURL等をお知らせ頂ければ
    調査等も行うことが可能になるかと思っております。

    よろしくお願いします。

  • 森本 | 2015.02.13 22:58

    今晩は。
    ご返事ありがとうございます。確認しましたら、
    AutoClone5の方ではなくjQuery Carousel AutoSlideと勘違いでした。
    おかげさまでAutoClone5に変えてみると、ちゃんと動作しました。
    スマホの表示もばっちりで、感動しました。
    本当にありがとうございます。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。

コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して