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

Ads by Google

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>要素でコンテンツを作り込んでいます。
また前後のナビゲーション操作のために2つの<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
画像がフェードアウトして消えていくときのエフェクトを指定。公式では「puffdropを試してください!」と紹介されています。

前後のナヴィゲーションの位置など、細かなデザインはCSS側で設定していくことになります。
画像を作り替えていく場合はパスを間違えないようにしましょう。

オススメは「Contain Mode」での利用

[Juicy Slider]の個性を活かすためのオススメの設定はオプションの「Contain Mode」です。
画像をウィンドウの縦・横のサイズにフィットさせて最適な大きさに調整してくれるので、すべてのデバイスで同じように表示させることができます。

以下、実際に使ってみたサンプルになります。

Juicy Slider / Contain Mode : http://on-ze.com/demo/jquery-juicy-slider/

ライセンスはMITですので、商用でも無料で使えます。

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

オンズでは、新規のホームページ制作だけでなく、こういった便利なプラグインを既存のホームページに設置するお手伝いも承っています。
比較的に安価で高機能なシステムを導入できますので、ご要望のある方はぜひお問い合わせください。

お問い合わせフォームは以下より。

お問い合わせ

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google