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様、素敵なプラグインありがとうございます。


Category

Service

Guidance

Salutation

WPCは大阪を中心に、ホームページ制作、リニューアル、コーディング、更新業務、各種印刷物制作、スキルアップ出張講習・セミナー等取り扱っております。
どこの会社に作成を依頼しようかとお悩みの方、リニューアルしたいんだけど良いプランはないかなとお探しの方、本格派のデザイナーにデザインを依頼したい、 コーディングだけ頼みたい、更新だけ頼みたい、パソコンやソフトの使い方を教えて欲しいなど、どんな事でもWPCまでお気軽にご相談ください。