jqueryプラグイン

最初にHTMLに書くコード

$(function(){ ここにコードを記載 });

または、  $(document).ready(function(){  ここにコードを記載 }); でもOK

セレクタ 適用させる範囲、要素のこと。　 $("セレクタ")

ダブルクォーテーション（“）、またはシングルクォーテーション（‘）で囲みます。どちらでもよい

外部リンク参考サイトさん jqueryセレクタ　

設定方法 ダウンロードファイルから「jquery.flexslider.js」か「jquery.flexslider-min.js」のどちらかと
「flexslider.css」をとりだします。

jquery本体のコードと一緒にHTMLファイルのheadに

• <script src="jquery.flexslider.js"></script>


• <LINK rel="stylesheet"href="flexslider.css"type="text/css">

をそれぞれ記述する。

HTMLのbody内にdivでスライドショーを作成する場所をつくる。
「flexslider.css」を使用してリストを作り画像を入れます。
<ul></ul>を使い、<li></li>の中にそれぞれ画像ファイル名　

コントローラー追加 imagesフォルダ内に自分でアイコンを作成し「flexslider.css」に下記追加

.flexslider:hover .flex-prev { opacity: 0.2; left: 10px; background: url(アイコンアドレス) no-repeat left; }
.flexslider:hover .flex-next { opacity: 0.2; right: 10px; background: url(アイコンアドレス) no-repeat right; }

「jquery.flexslider.js」の prevText: “Previous”,　 nextText: “Next”,　 を prevText: “”,　 nextText: “”, としておく。

:hoverによってオンマウス時の状態を設定。
親要素:hover 子要素{プロパティ名:値;}にして、マウスオーバーしやすいようにしておく

コントローラー追加方法

スライダー設定（最小限のパターン） htmlのhead内に記入。
$(function(){ ここにコードを記載 });
{　}の中のコード　 $('.flexslider').flexslider();

完成形（最小限のパターン）
$(function(){ $('.flexslider').flexslider(); });

外部リンク参考サイトさん 設定の仕方

サイズ設定　 js内でcss()メソッドを使い、プロパティを追加、修正する。幅(width)、高さ(height)をそれぞれ追加指定

$('要素').css('プロパティ', '値');

複数の場合　$('要素').css({'プロパティ':'値', 'プロパティ':'値'});

メソッドチェーンでもできる。　$("セレクタ").メソッド('プロパティ', '値').メソッド('プロパティ', '値');

子孫セレクタを使い画像サイズを設定。$('.flexslider .slides li img')

キャプション HTMLのbody内、スライドショー設置個所で画像と共にliで囲む。
さらに、「キャプション」はｐタグで囲む。

オプション アニメーションやスライドショーの時間など

controlNav: true ページングナビ表示　true または false

$(function()
{ $('.flexslider').flexslider({ controlNav: false }); });

外部リンク参考サイトさん オプションつけかたなど

ダウンロードファイルから［jquery.bxslider.min.js］とcssの「jquery.bxslider.css」とimagesフォルダの3つをとりだす。

imagesフォルダ内にページャーなどのアイコンが入っている。

jquery本体のコードと一緒にHTMLファイルのhead内に［jquery.bxslider.min.js］と「jquery.bxslider.css」
をそれぞれ記述する。

cssを使用しているため、<ul class=”bxslider”>とするリストを作ります。

<ul></ul>を使い、<li></li>の中に画像ファイル名

スライダー設定 htmlのhead内に記入
まず、これを記載する。 $(function(){ ここにコードを記載 });
　 クラスセレクタなので、$('.クラス名')

中のコード　$('.bxslider').bxSlider();

完成コード　$(function(){ $('.bxslider').bxSlider();});

「.bxSlider()」を呼び出す要素（スライドを囲む要素）は ul 要素の他に div 要素でもOK。

スライドショーサイズ設定

$(function(){ $('.bxslider').bxSlider({ここに記載}); });

スライドショー全体のサイズ　 slideWidth:サイズ

スライドショー設定 $(function()
{$.backstretch([ "スライドしたい画像1" , "スライドしたい画像2" , "スライドしたい画像3" ],{duration: 数値, fade: 数値});

引数になるスライドが複数になるのでカンマ（,）で区切ります。

{ }で囲み、それぞれ「,」で区切り duration:でスライドの間隔を、fade:で画像切り替えのスピードを設定