jQuery 複数のスライダーの設置、アニメーションとスピードの個別指定や一括操作を実現するプラグイン【 jQuery sliderrr 】
どうもこんにちは。今回のTipsは【jQuery 複数のスライダーの設置、アニメーションとスピードの個別指定や一括操作を実現するプラグイン【 jQuery sliderrr 】レスポンシブデザイン及びグリッドレイアウトにも対応】です。自作プラグインですが、グリッド部分はjQuery masonryのお力をお借りします。正直どこでつかうんだ?というプラグインですが、謎スライダー同様存在自体忘れる可能性もあるので…備忘録としてメモしておきます。どんな動きかはデモをみていただくのが良いかと思います。キー操作にも対応していますので←→で遊んでみていただければ幸いです。
DEMO & DOWNLOAD
実装方法(通常レイアウト)
実装はシンプルです。複数のスライダー用HTMLを用意して共通のClassを付与した後、プラグインを読み込みます。レスポンシブデザイン対応の際はオプションを参照してください。
読み込みファイル(jQueryは1.8以降から動作確認済み)
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.sliderrr.min.js"></script>
HTML
<div class="slider" data-speed="500" data-local-control="true">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="slider" data-speed="400" data-animate="flip">
<div>1</div>
…
<div>3</div>
</div>
<div class="slider" data-speed="300" data-animate="fade">
<div>1</div>
…
<div>3</div>
</div>
HTMLを記述する際に個々のアニメーションのスピード、アニメーションの種類、ローカルナビゲーションの有無が指定できます。アニメーションですが現在3種類に対応しています。ただし!transformに対応していないブラウザではフリップのみフェードに差し変わります。
個別オプション – スピードとコントロール
個別オプション | 概要 |
data-speed="520" | アニメーションの個別指定(1000 = 1s) |
data-local-control="true" | スライダーごとに個別コントロールの有無が指定できます。(オプション項目、control:falseの場合。この値がtrueの場合には全てのスライダーに個別コントロールが表示されます) |
個別オプション – アニメーション
個別オプション | 概要 | |
data-animate="flip" | slide 記述が無い場合や空欄 | スライドアニメーション |
fade | フェードアニメーション | |
flip | フリップアニメーション(めくる動き) |
JS
$(function(){
$(‘.slider’).sliderrr();
});
基本的なレイアウトは以上で実装可能です。もちろんスライダーが一つでも動作します。
対応ブラウザ
IE7,IE8,IE9,Chrome,Firefox,Safari,Opera,iPhone,iPad
IE7のみグリッドレイアウトには対応しておりません。CSS3アニメーションが対応している環境ではアニメーションはCSS3、対応していない環境ではjQueryに代替されます。
オプション
2013年10月時点で用意したオプションは以下になります。通常のスライダープラグインとあまり変わりません。
オプション | デフォルト | 概要 |
ease | ‘ease’ | アニメーションのイージングを指定します。 |
auto | false | 自動再生の有無を指定します。 |
interval | 3000 | 自動再生時のタイミングを指定します。 |
perspective | 1000 | アニメーションをフリップに指定している場合有効 |
eachspeed | true | スライダーごとアニメーションのスピードを変える場合’true’に指定します。 |
speed | 500 | 個別指定しない場合のスピードを指定します。 |
key | true | キーボードによるスライドの可不可を指定します。 |
control | true | 各スライダーごとにあるローカルナビの有無を指定します。 |
responsive | false | レスポンシブデザインに対応します。 |
selector | ‘#container’ | レスポンシブ有効時の可変する親要素のID |
prev | ‘<‘ | スライダー内スライドの【前へ】を編集できます(HTML可) |
next | ‘>’ | スライダー内スライドの【次へ】を編集できます(HTML可) |
slideprev | ‘#slideprev’ | スライダーの【次へ】をボタンのID |
slidenext | ‘#slidenext’ | スライダーの【前へ】をボタンのID |
例1.シンプル版 DEMO
$(function(){
$(‘.slider’).sliderrr({
control : false,
auto : false
});
});
例2.レスポンシブ対応版 DEMO
$(function(){
$(‘.slider’).sliderrr({
control : false,
auto : false,
responsive : true,
selector : ‘#container’
});
});
#container{width: 90%;margin: 0 5%;}
<div id="container">
<div class="slider" data-speed="520">
<div>1</div>
<div>1</div>
<div>1</div>
</div>
…
<div class="slider" data-speed="520">
…
</div>
</div>
例3.アニメーションごちゃ混ぜ版 DEMO
$(function(){
$(‘.slider’).sliderrr({
selector : ‘#container’,
auto : false
});
});
<div class="slider" data-speed="500" data-local-control="true">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="slider" data-speed="400" data-animate="flip">
<div>1</div>
…
<div>3</div>
</div>
<div class="slider" data-speed="300" data-animate="fade">
<div>1</div>
…
<div>3</div>
</div>
実装方法(グリッドレイアウト) DEMO
グリッドレイアウトの場合、jQuery masonryを使用する必要が有ります。またHTMLの構造も一部改変が必要です。
読み込みファイル(jQueryは1.8以降から動作確認済み)
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.sliderrr.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
JS
$(function(){
$(‘.slider’).sliderrr({
selector : ‘#container’,
auto : false
});
// 以下jQuery Masonryの設定
var container = document.querySelector(‘#container’);
var msnry = new Masonry( container, {
itemSelector: ‘.item’
});
});
HTML
<div id="container">
<div class="item">
<div class="slider" data-speed="520">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
…
<div class="item">
<div class="slider" data-speed="520">
<div>1</div>
…
<div>3</div>
</div>
</div>
</div>
謎スライダー同様、スライダーを大量に見せたい場合やスライダーのみでサイトを完結させてしまうような場面には使えそうですね。以上になります。