[jQuery] カルーセルの設定メモ

公開日:2013年10月1日

万能すぎて使いこなせてませんが、もっといろいろ挑戦してみたい jQueryのプラグインです。

カルーセル ダウンロード

Circular, Responsive jQuery Carousel – CarouFredSel

wordpressに追加する場合のタグです。EC-CUBEに利用する場合は、pathの部分のテンプレートタグをEC-cubeのものに修正してください。

headに追加

下記はTOPページのスライドイメージに利用した時のものです。下の方のメモを参考に値を変更、不要なものは削除してください。

<script src="<?php bloginfo('template_url'); ?>/js/jquery-1.8.2.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.carouFredSel-6.2.1-packed.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var carouObj = new Object();
carouObj.width = 900;
carouObj.items = 2;
carouObj.auto = 5000;
carouObj.swipe = true;
carouObj.circular = true;
carouObj.infinite = true;
carouObj.prev = ".carouPrev";
carouObj.next = ".carouNext";
carouObj.scroll = {
duration:3000,
easing: "linear",
pauseOnHover:"immediate",
fx:"none", //noneは演出なし スライドさせる場合はコメントアウトする
};
$("#portfolio").carouFredSel(carouObj);
});
</script>
HTML
<div id="top-image">
<ul id="portfolio">
<li><img src="<?php bloginfo('template_url'); ?>/img/001.jpg" width="450" height="280"></a></li>
<li><img src="<?php bloginfo('template_url'); ?>/img/002.jpg" width="450" height="280"></a></li>
<li><img src="<?php bloginfo('template_url'); ?>/img/003.jpg" width="450" height="280"></a></li>
<li><img src="<?php bloginfo('template_url'); ?>/img/004.jpg" width="450" height="280"></a></li>
</ul>
<div class="carouPrev"></div>
<div class="carouNext"></div>
</div>
CSS
#top-image {
width:900px;
height:280px;
position:relative;
margin:0px auto 0px auto;
overflow:visible;
}
#portfolio {
width:900px;
height:280px;
margin:0px auto;
text-align:left;
display: block;
list-style: none;
}
#portfolio li {
float:left;
width:450px;
height:280px;
padding:0px;
margin:0px;
display: block;
}
#portfolio li img {
width:450px;
height:280px;
margin:0px;
}

#top-image .carouPrev, .carouNext {
width: 50px;
height: 50px;
display: block;
position: absolute;
top: 115px;
cursor:pointer;
}
#top-image .carouPrev {
left:-30px;
background:url(img/prev.png) no-repeat;
background-position: 0 0;
}
#top-image .carouNext {
right: -30px;
background:url(img/next.png) no-repeat;
background-position: 0 0;
}
#top-image .carouPrev:hover, .carouNext:hover {
background-position: 0 -50px;
}

botan画像は、1枚の画像で作成しておき、CSSでhover時に50pxスライドするように設定

設定メモ
carouObj.width = (例)900;
画像表示画面の幅
carouObj.items = (例)2;
一度に動く画像数
carouObj.auto = (例)5000;
画像を切り替える間隔(TIME)
falseに設定で自動的に切り替えないようにする
0に設定で途中で止まらなくなる
carouObj.swipe = (例)true;
false:タッチパネル用のスワイプ ストップ
carouObj.circular = (例)true;
false:先頭に戻る
carouObj.infinite = (例)true;
最初の画像に戻り止らない
false:最後の画像でストップ
設定メモ(scroll=)
duration: (例)3000,
演出にかける時間
easing: (例)“linear”,
動きをスムーズにする
pauseOnHover: (例)“immediate”,
マウスオーバーですぐにストップする
trueに設定でスライド中にはストップしない
演出の設定(scroll=fx:”×××”)
フェード: fx:”fade”
クロスフェード: fx:”crossfade”
カバー: fx:”cover”
カバーフェード: fx:”cover-fade”
アンカバー: fx:”uncover”
アンカバーフェード: fx:”uncover-fade”
ページナビの設定メモ

ナビゲーションボタンをクリックしたときにスライドするイメージの枚数を指定

carouObj.prev = {
button:".carouPrev",
items:2
};
carouObj.next = {
button:".carouNext",
items:2
};
参考:設計力を学ぶデザインドリル JQuery入門講座

簡単な事から段階的に説明してくださっているサイトです。
カルーセルの他に、Nivo Sliderについても詳しい説明があって勉強になりました。
http://www.jquerystudy.info/index.html