【jQuery】超軽量レスポンシブ・スライダー［Juicy Slider］の使い方

juicy-slider-tiny

今日は軽快に動作するレスポンシブ対応スライダー［Juicy Slider］を紹介します。

この［Juicy Slider］では、ブラウザの CSS3 のサポートに依存している他のjQueryスライダーとは異なり、画像のアスペクト比を JavaScript を使って計算することで、古いブラウザとの互換性が高まり、より多くのデバイスで同じように表示されるようになっています。
最新のブラウザはもちろん、IE8、IE9、IE10 にも対応していますね。

また画像が切り替わるときのエフェクトの一部を jQuery UI に依存させることで、本体の［Juicy Slider］の容量を軽く抑えています。

以下［Juicy Slider］の設置方法です。

必要なファイルをダウンロード

使用するファイル一式は公式サイトからダウンロードしてきます。

Juicy Slider : http://redslim.ga/juicyslider/

ダウンロードしたファイルのうち、実際に使うのはスクリプト本体の「juicyslider.js」と、スタイルシートの「juicyslider.css」、それと「img」フォルダに入った画像一式です。

スクリプトとスタイルシートの設置

入手した各ファイルをHTMLの任意の箇所で読み込みます。
なお今回、jQuery本体ライブラリと jQuery UI は Google の CDN にホストされているものを利用します。

<head>
	<link rel="stylesheet" href="juicyslider.css">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
	<script src="juicyslider.js"></script>
</head>

このとき同時に「img」フォルダもアップロードして、スタイルシートの「juicyslider.css」内で使われているパスとリンクを合わせておきます。

スライダー／スライドショーのマークアップ

メインのスライダー部分の基本的なマークアップです。

<div id="myslider" class="juicyslider">
	<ul>
		<li><img src="data/1.jpg" alt=""></li>
		<li><img src="data/2.jpg" alt=""></li>
		<li><img src="data/3.jpg" alt=""></li>
		<li><img src="data/4.jpg" alt=""></li>
		<li><img src="data/5.jpg" alt=""></li>
	</ul>
	<div class="nav next"></div>
	<div class="nav prev"></div>
	<div class="mask"></div>
</div>

ここではリスト表示の<ul>要素でコンテンツを作り込んでいます。
また前後のナビゲーション操作のために２つの<div class="nav">要素を設置。
マスク処理を施したい場合は、さらに<div class="mask">も挿入します。

Juicy Sliderの設定

最後に「Juicy Slider」を動かすための初期設定のコードを記述します。

基本的な初期設定

特にオプションを指定しない場合は下記の簡単なコードを使います。

<script>
$('#myslider').juicyslider();
</script>

オプション設定

より細かく動作やエフェクトを指定したい場合のオプションの記述方法です。

$('#myslider').juicyslider({
	mode: "cover",
	width: '100%',
	height: '100%',
	mask: "raster",
	bgcolor: "#000",
	autoplay: 4000,
	 shuffle: false,
	 show: {effect: 'fade', duration: 1500},
	 hide: {effect: 'fade', duration: 1500},
});

各パラメーターの詳細は次のとおり。

mode: フルスクリーン表示の場合は “cover” を。ウィンドウサイズに画像の幅を合わせる場合は “contain” を指定。
width: ウィンドウサイズに合わせるためには “null” を指定します。そうでない場合はピクセル（px）またはパーセント（％）単位で他の値を設定
します。
height: 同上。
mask: 画像に施すマスク処理を指定できます。値は “raster”、”square”、”strip”、”none” から選択可能。
bgcolor: スライドショーの背景カラーを指定できます。
autoplay: 自動スライドの間隔をミリ秒単位で指定可能。”0″ にすると自動再生しません。
shuffle: 値を “true” にすると画像をランダム表示。
show: 画像がフェードインして表示されるときのエフェクトを指定。パラメーターは jQuery UI に依存します。
hide: 画像がフェードアウトして消えていくときのエフェクトを指定。公式では「puffかdropを試してください！」と紹介されています。

ONZE/BLOGオンズ開発ブログ

株式会社オンズのブログです