jcarousellite.jsを使って複数画像を画像枚数毎に左右スライドしながらカルーセル(回転)表示する方法をご紹介します。
Contents
ディスプレイ広告
複数画像を左右にスライドしながらカルーセル表示するCSSの記述
※.clPrev, .clNextは「NEXT」「BACK」矢印ボタンのCSS記述です。必要に応じて変更して下さい。
<style type="text/css"> <!-- body { font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif; margin:0; padding:0; } h1{ font-size:16px; font-weight:normal; line-height:1.4em; text-align:center; padding:15px 0; } p{ font-size:14px; text-align:center; } #idWrap{ width:650px; margin:0 auto; } .clPrev, .clNext{ border:solid 2px #666666; padding:10px; margin:15px 0; width:95px; text-align:center; cursor:pointer; color:#666666; } .clPrev:hover, .clNext:hover{ border:solid 2px #CCCCCC; color:#CCCCCC; } --> </style>
jcarousellite.jsを使って複数画像を画像枚数毎に左右スライドしながらカルーセル(回転)表示するJavaScriptの記述例
※jquery.min.js(1.10.2)、jcarousellite_1.0.1.jsファイルを読み込みます。$(画像スライドエリア).jCarouselLite({オプション})を設定します。オプションは「NEXT」「BACK」ボタンのclass名、一度に表示する画像枚数、画像表示位置等を設定します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="jcarousellite_1.0.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#iDemo").jCarouselLite({ btnPrev:'.clPrev', btnNext:'.clNext', visible:2, //表示する画像枚数 start:0 }); }); </script>
複数画像を左右にスライドしながらカルーセル表示するHTMLの記述
※画像スライドエリア(id=”iDemo”)に複数画像(i01.jpg~i06.jpg)を用意しました。必要に応じて変更して下さい。
<div id="idWrap"> <h1>複数画像を回転(カルーセル)表示します。</h1> <p>以下「NEXT」「BACK」をクリックすると複数画像がスライドします。</p> <div class="clNext">NEXT >></div> <div id="iDemo" class="jCarouselLite"> <ul> <li><img src="i01.jpg" alt="1" width="150" height="150"></li> <li><img src="i02.jpg" alt="2" width="150" height="150"></li> <li><img src="i03.jpg" alt="3" width="150" height="150"></li> <li><img src="i04.jpg" alt="4" width="150" height="150"></li> <li><img src="i05.jpg" alt="5" width="150" height="150"></li> <li><img src="i06.jpg" alt="6" width="150" height="150"></li> </ul> </div> <div class="clPrev"><< BACK</div> </div>
jcarousellite_1.0.1.jsで複数画像を回転(カルーセル)表示示デモページ
jcarousellite_1.0.1.jsで複数画像を回転(カルーセル)表示示デモ
ソース元:jCarousel Lite
jCarousel Lite
限られたスペースで見せる複数画像のスライダーやギャラリーの見せ方って色々ありますよね。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。