今までここでカルーセルパネルUIを実装するサンプルをいくつか紹介していますが、
amazonのサイトでも使われているような、ブラウザ枠のサイズによって
カルーセルに表示する個数を変化させるリキッド対応の
カルーセルパネルを試しに作ってみたので紹介してみます。

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

jQueryでリキッド対応のカルーセルUIを作成する実験

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

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

並べられたコンテンツ要素(画像)は左右の「≪」「≫」のボタンで一つずつスライドします。
ブラウザのサイズによって画面上に表示されるコンテンツ要素の個数が変化します。

この動作の全体構成について、
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>の数を変更すればいいだけになっています。

そしてこのHTMLソースに対しての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 = 300;

	$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'
			});

			listAdjust();

			function listAdjust(){
				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)
				});

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

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

				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(){
				listAdjust();
			});
		});

	});
});
</script>

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

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

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

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

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

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

リキッド対応のカルーセルパネルUIが必要になった際のご参考に是非。。

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

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

Related Posts

Comments (10)

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

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

  • 河合浩介 | 2012.08.24 16:46

    初めまして
    河合浩介と申します。
    Web初心者で、iPadのみでやっています。
    リキッドカルーセルパネルで質問があります。
    解って無い者の質問なのでちんぷんかんぷんですが、できるだけお答え頂けないでしょうか。
    残暑まだまだ暑い最中、ご面倒おかけします。
    よろしくお願いします。

    現在制作中のHPにカルーセルスライダーをつけてみたのですが、
    そうすると端末によって見え方が大きく異なるので、
    貴方のリキッドカルーセルパネルを参考にさせていただきました。
    ありがとうございます。
    そこで、貴方のデモと違う動きをするので困っています。

    1)まず、2段で表示されます。
    使いたい画像サイズは180*216なのでcssの#carouselをheight:216pxに変えました。li数は現在8要素。今後増やしたいです。
    script-20 #carousel_wrapをoverflow: ‘hidden’にしているのは2段にならないようにするためですか?

    2) listBaseWidthを180にしたからか、最初と最後は画像が切れて表示されます。
    割り算の仕方や黄金比があるのでしょうか?

    アドバイスお願いします。

    2012年8月24日
    河合浩介

  • BlackFlag | 2012.08.25 1:56

    >河合様

    初めまして。
    ご丁寧なコメントありがとうございます。
    このリキッドカルーセルをご活用いただいているようで
    嬉しく思っております。

    ご質問いただきました内容についてですが
    当方、現在iPadで確認できる環境が無いので何とも言えないのですが
    当記事で紹介しているサンプルファイルを
    リスト8個、高さ216pxにしてlistBaseWidthを180に変更しても
    同じ現象が起こるのでしょうか?

    こちらでPCブラウザベースで確認したところ
    その様な現象は見られませんでした。。

    サンプルファイルではその様な現象が起こらない場合は
    河合様の方で組まれているHTMLもしくはCSS内に
    なにか不具合を起こしてしまう原因があると考えられます。
    可能であればテストURLなど教えていただければ調査もできるかと思います。

    ちなみに、スクリプトの20行目の#carousel_wrapのoverflow:’hidden’は
    カルーセルエリアからはみ出した部分を表示させないためのものです。

    以上になりますが、
    ひとまずご確認の程、よろしくお願いします。

  • 河合浩介 | 2012.08.25 15:04

    こんにちは。
    早速のご教授ありがとうございます。

    おっしゃる通りでした。
    サンプルファイルのcssを読み込めば、無事動きました。
    サンプルファイルのcssでcommon.cssの一部だけしか引用していなかったのが
    原因だったと思われます。

    アドバイスありがとうございました。
    また貴方のHPで勉強します。

    2012年8月25日
    河合浩介

  • BlackFlag | 2012.08.26 19:11

    >河合様

    ご返答ありがとうございました。

    CSSが反映しきれていなかったようで
    無事に問題が解決して安心致しました。
    ご報告いただきありがとうございます。

    また何かありましたら
    ご連絡くださいませ。

    よろしくお願いします。

  • はーこ | 2013.02.20 16:05

    始めまして、HNにて失礼致しますがはーこと申します。
    BlackFlag様のソースは何時も綺麗で見やすいので参考にさせて頂いているのですが
    こちらのカルーセル、1ページに複数設置したい場合はどのように改造すれば宜しいでしょうか。

    私の方でも色々といじってみたのですが、どうも上手く動きませんでした。
    お手数お掛け致しますが、何卒、宜しくお願い申し上げます。

  • BlackFlag | 2013.02.24 1:49

    >はーこさん

    コメントありがとうございます。

    このリキッドカルーセルスクリプトをご活用いただいているようで
    嬉しく思っております。

    ご質問いただいた複数設置についてですが
    もともとその様な想定はしておらず、各要素をIDで制御しておりましたが
    まずIDで構成している箇所をすべてクラスに変えて
    スクリプトを該当エレメントに対して個々にスクリプトを実行させる構成に
    変更することで可能かと思っております。

    試しに構成を変更してみたサンプルを用意しましたので
    必要であれば下記よりダウンロードして参考にしてみてください。

    http://black-flag.net/devel/jQueryLiquidCarousel/jQueryLiquidCarouselDual.zip

    よろしくお願いします。

  • はーこ | 2013.02.26 15:50

    一年以上も前の記事のコメントに対応して頂き本当に感謝です。
    ありがとうございます!!

    物凄い理想の動きをしているのですが
    すみません、私の能力不足なばかりにお尋ねさせて頂きます。

    例えばなのですが、画像が1個だった場合
    実際ブラウザで動作確認すると、同じ画像が2つ表示されます。

    HTMLでの表記
    <div class=”carousel”>
    <ul class=”liquidlist”>
    <li>A画像</li>
    </ul>
    </div>

    ブラウザでの表示
     A A

    このような感じになります。
    分かりにくい説明で大変申し訳ないのですが
    画像をループ表示にしないようにするにはどこをいじればよいのでしょうか。
    大変恐縮ですが、もし宜しければ御対応頂ければと思います。
    度々申し訳ございませんが、お待ちしております。

  • BlackFlag | 2013.03.03 13:57

    >はーこさん

    ご確認ありがとうございます。

    再度ご質問いただいた件ですが
    当記事で紹介しているリキッドカルーセルの場合は
    申し訳ありませんが、数が少ない場合の想定はしておりません。。

    そもそも数が少ない場合、
    リキッドカルーセルという概念自体が成立しないと思うので
    実装する状況によって個別に処理を追加することが必要になるかと考えています。

    リストの数が多い場合にスクリプトを実行させるクラスを追加し
    リストの数が少ない場合はクラスを追加しない、といった形で構成してみてはいかがでしょうか。

    あいまいな返答になってしまい申し訳ありませんが
    よろしくお願いします。

  • はーこ | 2013.03.04 12:24

    ご丁寧にご返答頂きありがとうございました!
    また、お世話になる事があるかもしれませんが
    その際はまたコメント頂ければ幸いです。
    この度は本当にありがとうございました!







コメント内容

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

jQueryでリキッド対応のカルーセルUIを作成する実験

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR