よく使うJQueryスライダープラグイン「Slider Pro」

JQueryスライダープラグイン

WEBの画面レイアウトをスライダーで効率良く綺麗にしたいって事がよくあります。そんな時にはやっぱりJQueryが便利。キャラdeナカタでよく使うJQueryスライダープラグイン「Slider Pro」(bqworks)について実例を交えて紹介してみます。

JQueryプラグイン「Slider Pro」?スライダー?

シンプルな画像スライダー、サムネイル表示、横幅をフルに使ったダイナミックな表示、画像以外にもテキスト・ブロック要素をスライド可能、横方向・縦方向スライド、スワイプ対応、レスポンシブ対応、...等、オプションも多数用意された多機能なJQueryスライダープラグインです。
このページでは実際の実装例を紹介します。「Slider Pro」のダウンロード、インストール方法等、詳細は次のURLでご確認ください。

引用元:Slider Pro by bqworks
A modular, responsive and touch-enabled jQuery slider plugin that enables you to create elegant and professionally looking sliders.
http://bqworks.com/slider-pro/

JQueryプラグイン「Slider Pro」基本的な使い方

  1. Slider Pro」のサイト、Githubから必要なデータをダウンロードしてサーバーにアップロードします。
  2. 次にHTMLの<head>タグ内でスタイルシート、JQueryファイル、Slider Pro 本体(JQueryプラグイン)ファイルを読み込みます。
  3. <body>タグ内にスライダーのマークアップを行います。

CSS、JQuery、プラグインの読み込み

<link rel="stylesheet" href="path/to/slider-pro.min.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="path/to/jquery.sliderPro.min.js">
<script>
$(function(){
	$('#slider-pro').sliderPro();
});
</script>

HTMLマークアップ例

<div class="slider-pro" id="slider-pro">
	<div class="sp-slides">
		<div class="sp-slide">
		    <img class="sp-image" src="../../img/loading.gif" 
				data-src="../../img/services/websites/banner/sample_banner_1.png" />
		</div>
		<div class="sp-slide">
		    <img class="sp-image" src="../../img/loading.gif" 
				data-src="../../img/services/websites/banner/sample_banner_2.png" />
		</div>
		<div class="sp-slide">
		    <img class="sp-image" src="../../img/loading.gif" 
				data-src="../../img/services/websites/banner/sample_banner_3.png" />
		</div>
	</div>
</div>

バナー画像をスライダー!

バナー画像を5個、スライダーで表示したい時がありますが、「Slider Pro」ならもちろん簡単に対応可能です。

今回の実例はバナー画像の実装、画像横にarrows(進む・戻るボタン)、サムネイルの実装としてみましたので、

width: 640,
height: 320,
arrows: true,
buttons: false,
thumbnailsPosition: 'bottom',
thumbnailWidth: 100,
thumbnailHeight: 50

というオプションを設定しています。

<script>
$(function(){
	$('#slider-banner').sliderPro({
		width: 640,
		height: 320,
		arrows: true,
		buttons: false,
		thumbnailsPosition: 'bottom',
		thumbnailWidth: 100,
		thumbnailHeight: 50 
	});
});
</script>

バナーを横幅いっぱいにスライダー!

画面の横幅をいっぱいに使ったダイナミックなレイアウトにしたい場合は

visibleSize: '100%',
forceSize: 'fullWidth'

というオプションを設定する事で実現できます。ダイナミックですね〜!

<script>
$(function(){
	$('#slider-banner-full').sliderPro({
		width: 640,
		height: 320,
		arrows: true,
		buttons: false,
		visibleSize: '100%',
		forceSize: 'fullWidth'
	});
});
</script>

テキストやブロック要素(div等)をスライダー!

画像のスライダーはよく見かけますが、テキスト・ブロック要素が混在しているスライダーはあまり見た事がない(そもそも需要があまりない)かと思います。あまり実用としてないかもしれませんが、

今回の実例は、テキスト(アスキーアート)、ブロック要素(div内に見出し・段落)、テキスト(アスキーアート)、画像、Youtube埋め込み動画、という実装としてみましたので、

autoHeight: true

というオプションを設定しています。autoHeight: true を設定すると、スライドする要素の高さを自動で調整してくれますので大変便利です。

イマノウチニ
  ∧_∧
 ( ゚ω゚) ソロ~リ
..ノ| ハ,,
 ,√ 7"

見出しをスライダーに

このように見出し、段落というdiv要素をまとめてスライダーにする事も可能です。画像のみならずdiv要素をスライドできますので、CSSと組み合わせる事で可能性が広がります。

    ∧_∧__
  /(´・ω・`) /\  拾ってくれますか?
 /| ̄ ̄ ̄ ̄|\/  ネーネー
  |    |/
    ̄ ̄ ̄ ̄

高校時代から飽きずに聴いているGlay(公式Youtubeより)

<script>
$(function(){
	$('#slider-text').sliderPro({
		autoHeight: true
	});
});
</script>

と、ここまでスライダーの実装について紹介しましたが、画像を並べる、という所が一番需要としては多いのかなと思います。当サイトでは「Slider Pro」を紹介しましたが、他にもスライダープラグインは多数存在します。Googleで「JQuery スライダー」で検索すると出てきますので色々と試してみてください。

キャラdeナカタでは、JQuery(Javascript)のコーディングのご依頼を受け付けしております。
本記事で紹介したスライダーはもちろん、その他のJQuery(Javascript)のご相談もお気軽にお問い合わせください。

※記事作成日:2017/09/23
最終更新日:2017/09/23