サイト上での新着情報や関連情報などのギャラリー的要素となるものを
左右に設置した矢印ボタンなどを使って、表示要素をスライド操作させるカルーセルと呼ばれるUI。
jQueryプラグインでもカルーセルパネルを実装するものは数多く有りますが
必要最低限の動作でスクリプトもシンプルな形でのカルーセルパネルを作ってみたので紹介してみます。
まずは動作のサンプルから。
左右に現れる矢印をクリックしてください。
jQuery SIMPLE CAROUSEL【SAMPLE】
左右に現れる矢印をクリックすることで
並べられたコンテンツ要素（画像）が一つずつスライドします。
コンテンツ要素が左右の一番端に位置している時は
片方の矢印は非表示となります。
このカルーセルパネルUIの全体構成について、
まずはHTMLから。
◆HTML <div id="carousel"> <ul> <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＞のリストを入れ込みます。
このリストの＜li＞が一つのコンテンツ要素となります。
コンテンツ要素を増やしたり減らしたりする際は、
HTML側で単純に＜li＞の数を変更すればいいだけになっています。
そしてこのHTMLソースに対してのCSSは以下の様に。
◆CSS
#carousel {
margin: 0 auto;
width: 500px;
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 {
width: 100px;
float: left;
display: inline;
}
/* =======================================
ClearFixElements
======================================= */
#carousel ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
#carousel ul {
display: inline-block;
overflow: hidden;
}
全体を囲んでいる「#carousel」の値がカルーセルパネルの表示領域となり
それぞれの値は変更が可能になっています。
一点注意点は、今回のサンプルの構成では
大枠ID、「#carousel」の幅（width）に対して、
その中に入る＜li＞「#carousel ul li」の幅（width）は
割り切れる値でないと正常に動作しません。。。
そして実際に動作を実行させるスクリプトは以下の様になります。
◆SCRIPT
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#carousel').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>');
var prevSize = $('#carousel_prev').width();
var nextSize = $('#carousel_next').width();
$('#carousel_wrap').css({
width: (carouselWidth),
height: (carouselHeight),
position: 'relative',
overflow: 'hidden'
});
var listWidth= $('#carousel_wrap').children('ul').children('li').width();
var listCount= $('#carousel_wrap').children('ul').children('li').length;
$('#carousel_wrap ul').css({
top: '0',
left: '0',
width: (listWidth)*(listCount),
position: 'absolute'
});
carouselPosition();
$('#carousel_prev').click(function(){
$('#carousel_wrap ul:not(:animated)').animate({left: '+=' + (listWidth)},500,function(){
carouselPosition();
});
});
$('#carousel_next').click(function(){
$('#carousel_wrap ul:not(:animated)').animate({left: '-=' + (listWidth)},500,function(){
carouselPosition();
});
});
function carouselPosition(){
var ulLeft = $('#carousel_wrap ul').css('left');
var maskWidth = (carouselWidth) - ((listWidth)*(listCount));
if(carouselWidth >= ((listWidth)*(listCount))) {
$('#carousel_prev').css({display:'none'});
$('#carousel_next').css({display:'none'});
} else if(ulLeft == 0+'px') {
$('#carousel_prev').css({display:'none'});
$('#carousel_next').css({display:'block'});
} else if(ulLeft == (maskWidth)+'px') {
$('#carousel_prev').css({display:'block'});
$('#carousel_next').css({display:'none'});
} else {
$('#carousel_prev').css({display:'block'});
$('#carousel_next').css({display:'block'});
};
};
});
});
</script>
4行目の「#carousel」が実行させるID名になるので
全体を別のID名で構成した場合には、ここの名前も変更する必要があります。
＜ul＞と＜li＞の長さを判断して左右の矢印の表示／非表示を判断したり
クリックした際の移動距離や位置を制御しています。
今回は必要最低限のシンプルなカルーセルパネルとなっているので
自動で再生される機能や、凝った演出も組み込んでいません。
サイト上にさりげなく載せる新着情報の様な、
派手な動きは求めないカルーセルパネルUIが必要な際などに使えるかなと思っています。
シンプルなカルーセルパネルUIが必要になった際に是非。。。