先日「jQueryでシンプルなカルーセルパネルスライドUIを作成する方法」と題した、
jQueryでのシンプルなカルーセルパネルを実装する方法を紹介しましたが
そのカルーセルパネルに、ページ送り（ページネーション）を付けた形での
バージョンアップ（？）版を作ってみたので紹介してみます。
まずは動作のサンプルから。
左右に現れる矢印、もしくは画像下の「●」をクリックしてみてください。
jQuery SIMPLE CAROUSEL with PAGINATION【SAMPLE】
前回のサンプルとは違い、左右の矢印をクリックすることで
エリア枠内に表示されている画像がまるっと入れ替わります。
上記サンプルは画像20枚を4ページにわけて
スライドさせている構成になっています。
画像下の「●」をクリックすることで
該当ページ（パネル？）へスライドします。
このカルーセルパネルUIの全体構成について、
まずはHTMLから。
◆HTML <div id="carousel"> <ul id="carousel_base"> <li> <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> </ul> </li> <li> <ul> <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> </li> <li> <ul> <li><a href="#"><img src="img/photo11.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo12.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo13.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo14.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo15.jpg" width="100" height="100" alt="" /></a></li> </ul> </li> <li> <ul> <li><a href="#"><img src="img/photo16.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo17.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo18.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo19.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo20.jpg" width="100" height="100" alt="" /></a></li> </ul> </li> </ul> </div><!--/#carousel-->
大枠を任意のIDで覆い（サンプルでは「#carousel」とします）、
その中にベースとなる＜ul＞を入れ込み、
このリストに対しても任意のIDを付けます。（サンプルでは「#carousel_base」とします）
ベースとなるリストの＜li＞が一度にスライドする
コンテンツ要素となります。
前回同様に、コンテンツ要素を増やしたり減らしたりする際は、
このベースとなる＜ul＞リストの＜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#carousel_base {
height: 100px;
overflow: hidden;
}
#carousel ul#carousel_base li {
width: 500px;
float: left;
display: inline;
}
#carousel ul#carousel_base li ul {
width: 500px;
}
#carousel ul#carousel_base li ul li {
width: 100px;
float: left;
display: inline;
}
#carousel #carousel_pagination {
padding: 10px 0;
width: 100%;
text-align: center;
}
#carousel #carousel_pagination a {
margin: 0 5px;
width: 15px;
height: 15px;
display: inline-block;
overflow: hidden;
background:transparent url(../img/pagination_icon.jpg) no-repeat top left;
}
/* =======================================
ClearFixElements
======================================= */
#carousel ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
#carousel ul {
display: inline-block;
overflow: hidden;
}
全体を囲んでいる「#carousel」の値がカルーセルパネルの表示領域となります。
今回のサンプルではスライドさせる長さは表示領域全体幅なので
「#carousel」と「ul#carousel_base li」の幅（width）は同じ値にします。
「#carousel_pagination」がページ送り（ページネーション）の
設定箇所になるので必要に応じて指定を変更してください。
そして実際に動作を実行させるスクリプトは以下の様になります。
◆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#carousel_base').wrapAll('<div id="carousel_wrap"></div>');
$('ul#carousel_base').children('li').addClass('base_list');
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#carousel_base').children('li').width();
var listCount = $('#carousel_wrap').children('ul#carousel_base').children('li').length;
$('#carousel_wrap ul#carousel_base').css({
top: '0',
left: '0',
width: (listWidth)*(listCount),
position: 'absolute'
});
carouselPosition();
$('#carousel_prev').click(function(){
$('#carousel_pagination a').stop().animate({opacity:'0.5'},300);
$('#carousel_wrap ul#carousel_base:not(:animated)').animate({left: '+=' + (listWidth)},1000,function(){
$("#carousel_pagination a.active").prev('a').addClass('active').siblings().removeClass('active');
controlOpacity();
carouselPosition();
});
});
$('#carousel_next').click(function(){
$('#carousel_pagination a').stop().animate({opacity:'0.5'},300);
$('#carousel_wrap ul#carousel_base:not(:animated)').animate({left: '-=' + (listWidth)},1000,function(){
$("#carousel_pagination a.active").next('a').addClass('active').siblings().removeClass('active');
controlOpacity();
carouselPosition();
});
});
function carouselPosition(){
var ulLeft = $('#carousel_wrap ul#carousel_base').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'});
};
};
var caroselPagination = $('<div id="carousel_pagination"></div>');
$(this).append(caroselPagination);
$('#carousel_wrap ul#carousel_base li.base_list').each(function(){
caroselPagination.append('<a href="javascript:void(0);"></a>');
});
$('#carousel_pagination a').each(function(i){
$(this).attr('class','control_btn' + (i+1)).css({opacity:'0.5'});
});
$('#carousel_pagination a:first').each(function(i){
$(this).addClass('active').stop().animate({opacity:'1'},300);
});
var controlCount = $('#carousel_pagination').children('a').length;
$('#carousel_pagination a').click(function(){
var connectCont = $("#carousel_pagination a").index(this);// 0 START
$('#carousel_pagination a').removeClass('active').css({opacity:'0.5'});
$(this).addClass('active').css({opacity:'1'});;
$('#carousel_wrap ul#carousel_base').animate({left: '-' + ((listWidth)*(connectCont))},1000,function(){
carouselPosition();
});
});
$('#carousel_pagination a:not(.active)').hover(function(){
$(this).not('.active').stop().animate({opacity:'1'},300);
}, function(){
$(this).not('.active').stop().animate({opacity:'0.5'},300);
});
function controlOpacity(){
$('#carousel_pagination a').each(function(){
if ($(this).hasClass('active')) {
$(this).stop().animate({opacity:'1'},300);
} else {
$(this).stop().animate({opacity:'0.5'},300);
};
});
};
});
});
</script>
4行目の「#carousel」が実行させるID名になるので
全体を別のID名で構成した場合には、ここの名前も変更する必要があります。
ページ送り（ページネーション）のボタンは、
ベースのリストとなる「ul#carousel_base」の＜li＞の数によって自動生成されます。
ページ送りのアイコンはサンプルでは全て「●」になっていますが、
１つ目のボタンは「control_btn1」
２つ目のボタンは「control_btn2」
３つ目のボタンは「control_btn3」
といったように、ボタン一つ一つに別々のクラスが付くようにナンバリングしてあるので
背景画像などを利用して数字の番号にすることも可能になっています。
前回のサンプルは左右の矢印での移動のみでしたが
この様なページ送り機能があった方がユーザーに対して優しい気もしています。
ページ送り付きのシンプルなカルーセルパネルUIが必要になった際に是非。。。