今までここでカルーセルパネル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が必要になった際のご参考に是非。。