先日「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="http://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>の数によって自動生成されます。

ページ送りのアイコンはサンプルでは全て「●」になっていますが、
1つ目のボタンは「control_btn1」
2つ目のボタンは「control_btn2」
3つ目のボタンは「control_btn3」
といったように、ボタン一つ一つに別々のクラスが付くようにナンバリングしてあるので
背景画像などを利用して数字の番号にすることも可能になっています。

前回のサンプルは左右の矢印での移動のみでしたが
この様なページ送り機能があった方がユーザーに対して優しい気もしています。

ページ送り付きのシンプルなカルーセルパネルUIが必要になった際に是非。。。

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

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

Related Posts

Comments (2)

  • nakagawa | 2012.10.20 0:18

    BlackFlag様

    ページネーション付きのカルーセルを探しており、このサイトにたどり着きました。
    そこで質問です。
    次のようにカスタマイズすることは可能なのでしょうか?

    1.自動再生
    2.画像は1枚ずつスクロール
    3.スクロールはループ

    お忙しいところ恐れ入りますが、よろしくお願いいたします。

  • BlackFlag | 2012.10.22 1:09

    >nakagawaさん

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

    ご質問頂きましたカルーセルのカスタマイズについてですが

    1.自動再生
    自動再生については、当ブログ別記事の
    ———————————————-
    jQueryでフリック/スワイプ動作付きの自動再生スライドショーを作成する実験
    http://black-flag.net/jquery/20120314-3723.html
    ———————————————-
    こちらの自動再生部分を組み合わせることで
    可能になるかと思います。

    2.画像は1枚ずつスクロール
    当記事で紹介しているカルーセルの構成で考えた場合は
    画像を1枚ずつスクロールさせるとページネーションとの整合性が合わなくなります。
    全体を<ul>の入れ子で構成してあるので
    実装時の組み方によって1枚ずつスクロールしているように見せることも可能かと思います。

    3.スクロールはループ
    こちらは現状の構成ではちょっと厳しいかと感じております。。

    以上になりますがご検討ください。
    よろしくお願いします。







コメント内容

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

jQueryでページ送り(ページネーション)付きのカルーセルパネルスライドUIを作成する方法

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