以前、「jQueryでシンプルなカルーセルパネルスライドUIを作成する方法」と題して、
jQueryを使ってのシンプルなスクリプトでカルーセルUIを実装する方法を紹介しましたが
カルーセル動作での自動でスライドするパターンの実装方法のリクエストをいただき、
以前のものをカスタマイズして、試しに作ってみたので紹介してみます。
まずは動作のサンプルから。
jQuery SIMPLE CAROUSEL AUTO SLIDE【SAMPLE】
5秒ごとにカルーセルパネルが自動でスライドします。
スライドは左右の矢印をクリックすることで動作させることも可能です。
並べられたコンテンツ要素（画像）は一つずつスライドし、
要素全体はループして表示されます。
このカルーセルパネル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-->
HTMLは以前の記事のものと構成は全く変わっていません。
大枠を任意の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;
}
CSSも以前の記事のものと構成は全く変わっていません。
全体を囲んでいる「#carousel」の値がカルーセルパネルの表示領域となり
それぞれの値は変更が可能になっています。
そして実際に動作を実行させるスクリプトは以下の様になります。
◆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 slideTime = 500;
var delayTime = 5000;
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>');
$('#carousel_wrap').css({
width: (carouselWidth),
height: (carouselHeight),
position: 'relative',
overflow: 'hidden'
});
var listWidth = parseInt($('#carousel_move').children('ul').children('li').css('width'));
var listCount = $('#carousel_move').children('ul').children('li').length;
var ulWidth = (listWidth)*(listCount);
$('#carousel_move').css({
top: '0',
left: -(ulWidth),
width: ((ulWidth)*3),
height: (carouselHeight),
position: 'absolute'
});
$('#carousel_wrap ul').css({
width: (ulWidth),
float: 'left'
});
$('#carousel_wrap ul').each(function(){
$(this).clone().prependTo('#carousel_move');
$(this).clone().appendTo('#carousel_move');
});
carouselPosition();
$('#carousel_prev').click(function(){
clearInterval(setTimer);
$('#carousel_move:not(:animated)').animate({left: '+=' + (listWidth)},slideTime,function(){
carouselPosition();
});
timer();
});
$('#carousel_next').click(function(){
clearInterval(setTimer);
$('#carousel_move:not(:animated)').animate({left: '-=' + (listWidth)},slideTime,function(){
carouselPosition();
});
timer();
});
function carouselPosition(){
var ulLeft = parseInt($('#carousel_move').css('left'));
var maskWidth = (carouselWidth) - ((listWidth)*(listCount));
if(ulLeft == ((-(ulWidth))*2) || ulLeft == ((-(ulWidth))*2)+1) {
$('#carousel_move').css({left:-(ulWidth)});
} else if(ulLeft == 0) {
$('#carousel_move').css({left:-(ulWidth)});
};
};
timer();
function timer() {
setTimer = setInterval(function(){
$('#carousel_next').click();
},delayTime);
};
});
});
</script>
4行目の「#carousel」が実行させるID名になるので
全体を別のID名で構成した場合には、ここの名前も変更する必要があります。
5,6行目の
———————————-
var slideTime = 500;
var delayTime = 5000;
———————————-
は、「slideTime」がスライド動作のスピード
「delayTime」が自動でスライドする際の待機時間
となっているので自動でスライドするタイミング等を
ここの値を変更することで可能としてあります。
カルーセルパネルUIもいろいろなパターンがありますが
こういった自動で定期的にスライドさせる動作も
見せたい物が多い時などにも有効かと感じています。
オートスライド機能付きのカルーセルパネルUIが必要になった際に是非。。。