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アナリティクスタグは流用しないで下さい。