jQuery スライダーの中にスライダーが設置できるプラグイン【 jQuery slideinslide 】

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

どうもこんばんは。今回の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
});
});

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