jQuery 複数のスライダーの設置、アニメーションとスピードの個別指定や一括操作を実現するプラグイン【 jQuery sliderrr 】

この記事は3年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。今回のTipsは【jQuery 複数のスライダーの設置、アニメーションとスピードの個別指定や一括操作を実現するプラグイン【 jQuery sliderrr 】レスポンシブデザイン及びグリッドレイアウトにも対応】です。自作プラグインですが、グリッド部分はjQuery masonryのお力をお借りします。正直どこでつかうんだ?というプラグインですが、謎スライダー同様存在自体忘れる可能性もあるので…備忘録としてメモしておきます。どんな動きかはデモをみていただくのが良いかと思います。キー操作にも対応していますので←→で遊んでみていただければ幸いです。

jQuery Sliderrr

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>

謎スライダー同様、スライダーを大量に見せたい場合やスライダーのみでサイトを完結させてしまうような場面には使えそうですね。以上になります。