レスポンシブ対応のjQueryプラグイン「Glide.js」スライドショー

スマートフォンやタブレット端末のスワイプにも対応し、かつレスポンシブなスライドショーが実現できるjQueryプラグイン「Glide.js」をご紹介します。横幅100%のイメージスライドショーを手軽に実装できるので使いやすいです。

【使い方】

まずは、GitHubよりGride.js一式をダウンロードします。

1.jQueryとGlide.js、style.cssを読み込む

<header>内に「jQuery本体」と、「glide.js」、「style.css」を読み込みます。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jquery.glide.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" /><script src="js/jquery.glide.js" type="mce-text/javascript" data-mce-src="js/jquery.glide.js"></script>

オプション設定が可能ですが、デフォルト設定での利用の場合は、下記の3行のみでOKです。

2.JavaScriptを記述

<scrpt type="text/javascript">
	$('.slider').glide();

1 2	<scrpt type="text/javascript"> $('.slider').glide();

3-1.HTMLを記述(サンプル1)

▼サンプル1
900×400pxの画像を3枚スライドさせてみます。

デモサンプル1

<div class="slider">
	<ul class="sliders">
		<li class="slide"><img src="images/image1.jpg" /></li>
		<li class="slide"><img src="images/image2.jpg" /></li>
		<li class="slide"><img src="images/image3.jpg" /></li>
	</ul>
</div>

</ul>

</div>

ウィンドウサイズ930以下の場合のCSSを記述します。(※スライドする対象のサイズによってこおこの指定を調整する必要があります。)

@media only screen and (max-width:930px) {
	.slider {
		height: auto;
	}
}

@media only screen and (max-width:930px) {

.slider {

height: auto;

}

3-2.HTMLを記述(サンプル2)

▼サンプル2
テキストをスライドで表示させてみます。

デモサンプル2

<div class="slider">
	<ul class="slides">
		<li class="slide"><div class="box" style="background-color: #1abc9c;"><span class="txt">文章1</span></div></li>
		<li class="slide"><div class="box" style="background-color: #16a085;"><span class="txt">文章2</span></div></li>
		<li class="slide"><div class="box" style="background-color: #f1c40f;"><span class="txt">文章3</span></div></li>
	</ul>
</div>

</ul>

</div>

ウィンドウサイズ930以下の場合のCSSを記述します。(※スライドする対象のサイズによってこおこの指定を調整する必要があります。)

@media only screen and (max-width:930px) {
	.slider {
		height: 200px;
	}
	.box {
		width:100%;
		min-height:200px;
		line-height:200px;
	}
}

@media only screen and (max-width:930px) {

.slider {

height: 200px;

}

.box {

width:100%;

min-height:200px;

line-height:200px;

}

4.オプションの設定

オートプレイやナビゲーションの有無などを設定することができます。指定する場所は.glide()の中に「,」で区切って記述します。サンプルでは以下のようなオプション設定になっています。

▼サンプルにおけるJavaScript設定

<script>
	$('.slider').glide({
		autoplay: 3000,
		hoverpause: true,
		animationDuration: 1000,
		navigation: false,
		arrows: true,
		keyboard: true
	});
</script>

$('.slider').glide({

autoplay: 3000,

hoverpause: true,

animationDuration: 1000,

navigation: false,

arrows: true,

keyboard: true

});

</script>

オプション設定の中身

autoplay	自動動作
hoverpause	マウスオーバーで停止
animationDuration	スライドにかかる時間
navigation	ポイントナビを表示/非表示
arrow	next/prevボタンを表示/非表示
keyboard	キーボード操作に対応可否

画像イメージをスライドさせる場合と、テキストのみをスライドさせる場合で要素の範囲が違ってきてしまうので、それぞれの場合でCSSを微調整して使う必要がありますのでご注意ください。