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

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

カルーセルダウンロード

Circular, Responsive jQuery Carousel – CarouFredSel

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

headに追加

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

[js]
<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>
[/js]

HTML

[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>
[/html]

CSS

[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;
}
[/css]

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”

ページナビの設定メモ

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

[php]
carouObj.prev = {
button:".carouPrev",
items:2
};
carouObj.next = {
button:".carouNext",
items:2
};
[/php]

参考：設計力を学ぶデザインドリル JQuery入門講座

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

カルーセル ダウンロード