サイト上での新着情報や関連情報などのギャラリー的要素となるものを
左右に設置した矢印ボタンなどを使って、表示要素をスライド操作させるカルーセルと呼ばれる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が必要になった際に是非。。。