jQuery スライダーの中にスライダーが設置できるプラグイン【 jQuery slideinslide 】
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
どうもこんばんは。今回のTipsは【jQuery スライダーの中にスライダーが設置できるプラグイン jQuery slideinslide】です。今回のプラグインは自作です。機会は少ないですが何度かスライダーの中にスライダーを設置したいという場面がありました。これまでは都度スクリプトを書いていたのですが…ちょっと面倒だなぁとプラグイン化しました。この謎なプラグイン…自分用にとっておいてもいいのですが、存在自体忘れる可能性もあるので…備忘録としてメモしておきます。
DEMO & DOWNLOAD
更新情報
・2013 3/8 水平方向へのスライド機能を追加。詳しくはOptionをご確認ください。上下左右のキーボートにも対応しております。DEMOはこちらから
実装方法
実装は至ってシンプルです。スライドの中にスライドの入るHTMLを用意し、プラグインを読み込みます。
読み込みファイル(jQueryは1.7以降から動作確認済み)
<script src="js/jquery-1.7.2.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.slideinslide.js"></script>
<link rel="stylesheet" href="css/decoration.css"/>
HTML
<div id="slideBd">
<div><div class="slide">slide1-1</div>slide1-2</div>slide1-3</div></div>
<div><div class="slide">slide2-1</div>slide2-2</div>
<div><div class="slide">slide3-1</div>
</div>
JS
$(function(){
$(‘#slideBd’).slideinslide();
});
実装に関しては以上です。decoration.cssには【次/前】のデザイン等が含まれています。必要なければ外していただいて構いませんが記述推奨です。
ブラウザ
IE7,IE8,IE9,Chrome,Firefox,Safari,Opera
オプション
2013年3月6日時点で用意したオプションは以下になります。通常のスライダープラグインとあまり変わりません。
オプション | 設定 | 概要 |
auto | true / false | 自動再生のON/OFFを指定します。 |
intval | 1000 | 自動再生時のスライドのタイミングを指定します。 |
speed | 1000 | スライドのスピードを指定します。 |
ease | ‘easeInOutExpo’ | アニメーションのイージングを指定します。 |
captions | true / false | キャプションの有無を指定します。 |
key | true / false | キーボードによるスライドの可不可を指定します。 |
prev | ‘prev’ | スライダー内スライドの【前へ】を編集できます(HTML可) |
next | ‘next’ | スライダー内スライドの【次へ】を編集できます(HTML可) |
slideprev | ‘slideprev’ | スライダーの【次へ】を編集できます(HTML可) |
slidenext | ‘slidenext’ | スライダーの【前へ】を編集できます(HTML可) |
slidestop | ‘slidestop’ | 自動再生停止のテキストを変更する場合に使用(HTML可) |
vertical | true / false | スライダー内のスライドアニメーションを水平方向に変更できます。 |
オプション設定例
$(function(){
$(‘#slideBd’).slideinslide({
intval : 3000,
speed : 1000,
ease : ‘easeInOutExpo’,
auto : false,
captions : true
});
});
スライダーを大量に見せたい場合や、スライダーのみでサイトを完結させてしまうような場面には使えそうですね。以上になります。