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

sponsors

top of page

©2024 coliss