[JS]2D、3Dの多彩で面白いエフェクトを備えたスライダーのスクリプト -Flux slider

iPhone, iPadなどにも対応した、画像のスライド時にCSS3アニメーションを採用し多彩なエフェクトが楽しめるスライダーを実装するjQueryのプラグインを紹介します。

Flux slider
デモページ

[ad#ad-2]

画像の変更時は、上記のバー状のものをはじめ、ブロック状、サークル状など、2D、3Dのダイナミックなアニメーションが用意されています。

Flux sliderの実装

HTML

各画像をdiv要素で内包します。

<div id="slider">
    <img src="img/avatar.jpg" alt="" />
    <img src="img/ironman.jpg" alt="" />
    <img src="img/tron.jpg" alt="" />
    <img src="img/greenhornet.jpg" alt="" />
</div>

JavaScript

「jquery.js」と当スクリプトを外部ファイルとし、下記のスクリプトを記述します。

$(function(){
    window.myFlux = new flux.slider('#slider');
});

スクリプトのオプション

autoplay (default: true)

スライダーが自動で再生するかどうか。

pagination (default: false)

ページネーションを設置するかどうか。

transitions (default: all available transitions)

スライド時のエフェクト（2D, 3Dなど豊富に用意されています）。

delay (default: 4000)

画像変更時の時間

オプションを使用すると、下記のようになります。

$(function(){
    window.myFlux = new flux.slider('#slider', {
        autoplay: false,
        pagination: true
    });
});

Flux sliderの対応ブラウザ

対応ブラウザは下記の通りです。

• Safari
• Chrome
• iOS
• Blackberry Playbook
• Firefox 4
• Opera 11

[ad#ad-2]