Skip to content

jQueryのスライドショー、jcarouselliteを使う

by haruma on 2010.06.11

スライドショーにjQueryプラグインのjcarouselliteをつかいました。

head内

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jcarousellite.js"></script>
<script type="text/javascript">
<!--
$(function() {
    $(".anyClass").jCarouselLite();
});
//-->
</script>
</head>

body

<div class="anyClass">
    <ul>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
    </ul>
</div>

基本的にこれで動作します。
オプションを指定するには、下のようにします。

$(function() {
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
});

オプション

btnPrev
クリックすると前の写真に移動する「前へ」ボタンのセレクターを指定します。

btnNext
クリックすると次の写真へ移動する「次へ」ボタンのセレクターを指定します。

btnGo
ボタンを押すと、その写真が中心にくるような動きをさせる。

<div class="externalControl">
  <button class="1">1</button>
  <button class="2">2</button>
  <button class="3">3</button>
</div>
$(".externalControl .jCarouselLite").jCarouselLite({
    btnGo:
    [".externalControl .1", ".externalControl .2",".externalControl .3"]
});

mouseWheel
マウスホイールで回転させます。
Mouse Wheelプラグインが必要です。

auto
自動でスクロールするようにします。間隔は1ミリ秒の値を指定します。

$(".auto .jCarouselLite").jCarouselLite({
    auto: 800,
    speed: 1000
});

speed
写真がスライドするスピードを指定します。0にするとスライド効果をつかいません。

easing
イージングの種類を指定します。

$(".bounceout .jCarouselLite").jCarouselLite({
    easing: "bounceout"
});

easein: ゆっくり移動開始
easeinout: ゆっくり移動開始/終了
easeout: ゆっくり移動終了
expoin: 非常にゆっくり移動開始
expoinout: 非常にゆっくり移動開始/終了
expoout: 非常にゆっくり移動終了
bouncein: 最初に跳ねる感じで移動
bounceinout: 最初と最後に跳ねる感じで移動
bounceout: 最後に跳ねる感じで移動
elasin: 左右に揺れる感じで移動開始
elasinout: 左右に揺れる感じで移動開始/終了
elasout: 左右に揺れる感じで移動終了
backin: 開始時に一度反対方向に移動
backinout: 開始時に一度反対方向に移動し、終了時に行き過ぎた後に戻る
backout: 終了時に行き過ぎてから戻る

vertical
スライドの方向を指定します。falseは横方向、trueは縦方向です。

circular
falseならスライドが最後まで到達すると停止し、trueなら最後まで到達すると先頭に戻ります。

visible
見える写真(要素)の数を指定します。3だと3つの写真が表示され、3.5は3つと写真半分が表示されます。

start
いくつめの写真(要素)から表示するか指定します。

scroll
一度のスライドで移動する写真分を指定します。

beforeStart
スライドのアニメーションが始まる前に関数を実行します。

$(".callback .jCarouselLite").jCarouselLite({
beforeStart: function(a) {
alert("Before animation starts:" + a);
},
afterEnd: function(a) {
alert("After animation ends:" + a);
}
});

afterEnd
スライドのアニメーションが終わった後に関数を実行します。

From → jQuery

Comments are closed.