jQueryスライドショーのプラグインを使用 | web-wizardry
インターネット・スマホ、そしてテレビにwebの魔法をWizardry
jQueryスライドショーのプラグインを使用
2015年01月18日 · jQuery
jQueryスライドショーのプラグイン「Sliderpro」を使用して、スライドショーを作成していきます。
http://bqworks.com/slider-pro/
「Sliderpro」は簡単に５つのスライドショーを作る事ができます。
作れるタイプは以下のようになります。
「pro」という名前がありますが、ライセンスは「MIT」ライセンスなのでご安心を！
Sliderpro ソースコードのダウンロード
プラグインのソースコードをダウンロードしましょう
http://bqworks.com/slider-pro/からダウンロードする場合
※少しスクロールした場所の赤い枠からダウンロードできます。
GitHub（https://github.com/bqworks/slider-pro/）からダウンロードする場合
※赤い枠からダウンロードできます。
Sliderpro ソースコードを展開
フォルダー階層は以下の様になっております。
赤枠の部分が主に使用するところです。
たまに、ソースコードをダウンロードして満足してしまう方がいるのですが、
まずはサンプルソースもしくは日本語で解説しているサイトを見つけましょう！
サンプルソースがある場合は「head」タグない「
」の前にCSS又はスクリプトの読込みがあるか確認しましょう
Sliderproの場合のサンプル参照
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Slider Pro</title>
<link rel="stylesheet" type="text/css" href="../dist/css/slider-pro.min.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/examples.css" media="screen"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="../libs/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../dist/js/jquery.sliderPro.min.js"></script>
</head>
headタグ内から
・css/examples.css
・dist/css/slider-pro.min.css
・jquery-1.11.0.min.js
・dist/js/jquery.sliderPro.min.js
を読込みしていることがわかります
こちらの内容を参考にして各々のフォルダーに格納していきます。
サンプルソースコードのダウンロード
Sliderproをより理解してもらう為に、サンプルソースコードを用意しました。
サンプルソースコードダウンロード
フォルダー構成
baceフォルダー
cssフォルダー
imgフォルダー
index.html
jsフォルダー
の構成となっております。
inxex.htmlを開いてみると
となっております。
ソースコードの移動
必要なソースコードを「slider-pro-master」から「bace」フォルダーへ移動します。
前回、読込ませているコードを移動させます
ソースコードの読込ませる
jQueryライブラリはCDNを利用します
CDN？という方はこちらを参照ください
jQueryライブラリを読込ませる
1.8.3のバーションを読込ませておきます。
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/slider-pro.min.css">
<link rel="stylesheet" type="text/css" href="css/examples.css">
<script type="text/javascript" src="js/jquery.sliderPro.min.js"></script>
</head>
スライドショーの準備
mainIDを持ったdiv内に以下の文言を追加
<div id="main">
<!-- ⬇ここにスライドショーする画像を指定します -->
<div id="slide_box" class="slider-pro">
</div>
<!-- main -->
</div>
スライドさせる場所を指定してあげます。
スライドする画像を指定
sp-slidesクラスのdiv内にスライドする画像を指定していきます。
今回は５つ読込みます
<div class="sp-slides">
<div class="sp-slide">
<img class="sp-image" src="img/img_1.jpg" alt="" width="900">
</div>
<div class="sp-slide">
<img class="sp-image" src="img/img_2.jpg" alt="" width="900">
</div>
<div class="sp-slide">
<img class="sp-image" src="img/img_3.jpg" alt="" width="900">
</div>
<div class="sp-slide">
<img class="sp-image" src="img/img_4.jpg" alt="" width="900">
</div>
<div class="sp-slide">
<img class="sp-image" src="img/img_5.jpg" alt="" width="900">
</div>
</div>
ブラウザで起動させるとどうなるか？
5つめの画像が表示されております。
他の画像は下に表示されています。
動作させるスクリプトを指定
今の状態ではスライドショーとも言えないので最後に、スライドショーをさせる為の動作スクリプトを指定します。
headタグ最後に以下の文言を足してみてください
<head>
<!-- 各ファイル読込みを省略 -->
<script type="text/javascript">
$(function(){
$( '#slide_box' ).sliderPro({
width: '50%',
height: 500,
aspectRatio: 1.5,
visibleSize: '100%',
forceSize: 'fullWidth'
});
});
</script>
もう一度、ブラウザを起動してみてください。
スライドショーが完成しました。
自動でページガイドの黒丸が表示されます。
今回のスライドショーでは、白い枠をはみ出して全体に表示されてしまっております。
スマホ表示対応にも有効にする為にそのような動作をしているのですが、
白い表示枠内に表示をおさめる場合は
common.cssのmainに「overflow: hidden;」を足します
#main {
text-align: center;
overflow: hidden;
}
足すことによって以下のような形になりました
他にも４つ動作させる方法があるので色々とサンプルを参考にして、試して頂ければと思います。
引用サイト
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-slider-pro.html
・画像
http://www.pakutaso.com/
Page top
