The current article
画面幅いっぱいの横スライダー内に、更にスライダーを配置できるjQuery
横スクロールのスライダー内に、縦方向or横方向のスライダーが設置出来るプラグインを見つけたのでご紹介します。
制作者の方は「機会は少ない」と書いておられますが、十分使いドコロはあるのではないでしょうか。
capture
参照サイト：Stronghold – jQuery slideinslide
ダウンロード
まずは上記サイトにアクセスします。
本文中に「DEMO & DOWNLOAD」とありますのでクリック。
中央に
・download v1.2 zip
・jquery.slideinslide.js
・jquery.slideinslide.min.js
とありますので、いずれかをクリックします。
download v1.2 zipをクリックすると、
slideinslide_v1.2フォルダがダウンロード出来ます。
内訳は、
・index.htmlファイル
・cssフォルダ
・imagesフォルダ
・jsフォルダ
です。
index.htmlを開くと
こんな感じです。
作者の方はcssをカスタマイズされているようですね。
「js」フォルダ内にはjquery本体も入っています。
すでにページをお持ちの方で、「プラグイン部分だけでいいよ」という方は、
・jquery.slideinslide.js
・jquery.slideinslide.min.js
をクリックすれば、コードが表示されます。
説明
まず、index.htmlファイルをブラウザで確認すると、横スライダーin横スライダーになっています。
縦スクロールに変更したい場合は、htmlファイルの13行目辺りから始まる、
<script type="text/javascript">
$(function(){
$('#slideBd').slideinslide({
intval : 3000,
speed : 1000,
ease : 'easeInOutExpo',
auto : false,
captions : true,
});
});
</script>
上記8行目の「captions : true,」の後に「vertical : true」を追加して下さい。
縦スクロールに変わり、スライダー下にあった左右矢印も上隅上下矢印に変更されます。
「intval」は、自動再生時のスライドのタイミング
「speed 」は、スライドのスピード
「ease」は、アニメーションのイージング
「auto」は、自動再生のON/OFF（falseをtrueにすると自動再生）
「captions」は、キャプションの有無
となります。
他にもオプションがありますので、元サイトで確認してみて下さい。
あとは、htmlをゴニョゴニョします。
簡単な説明ですが、
<div id="slideBd"> <div> <div class="caption">This text is the caption. Please describe the text freely. I can also <a href="#">link</a>.</div> <img src="images/slide_1.jpg"> </div> <div class="slide"><h3>slide1-2</h3></div> </div> <div> <div class="slide"><h3>slide2-1</h3></div> <div class="slide"><h3>slide2-2</h3></div> <div class="slide"><h3>slide2-3</h3></div> </div> ・ ・ ・ </div>
という構成になっています。
「id="slideBd"」の直下にある「<div>・・・</div>」を増やせば横スライダーの数を増やせます。
また、9～11行目のように、「<div class="slide">・・・</div>」を増やせば内側（縦or横）スライダーの数を増やせます。
3行目「<div class="caption">」内は、スライダー下部のコメント部分と画像になります。
あとは触って頂ければつかめると思いますー
以上、画面幅いっぱいの横スライダー内に、更にスライダーを配置できるjQueryのご紹介でした。
Stronghold様、素敵なプラグインありがとうございます。
関連記事
