flexslider - Jquery　スライダープラグインの使い方とオプションの日本語訳。

簡単なデモ

Demoサイトはこちら
http://flexslider.woothemes.com/
レスポンシブ、フリックスライドにも対応で、なかなかスムーズなスライダーですね。

【注　目】
※非Jquery なレスポンシブスライダーのSwiperオプションも翻訳しました。
※ついでにモーダルウィンドウ（画面中央に飛び出てくるやつネ）もつけたいときは「Lightbox2の使い方 モーダルウィンドウで写真を見せたい」も参照で。

【使い方】

１．まずはこの本サイトから必要なものをダウンロードしてくる。
http://www.woothemes.com/flexslider/
「DOWNLOAD FLEXSLIDER」って書いてある緑のボタンですね。

２．中身を取り出して、HTMLのhead内にはこのような感じで記述。順番はこのままで。

<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>

取り出して使うファイルは、flexslider.css、jquery.flexslider.jsの二つ。ちゃんと読み込める位置に置いてくださいね。これらが読み込めていないことを気がつかずに、何時間も「できないなあ」と首をひねる初心者も多いでしょうから注意です。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>っていうのはflexsliderを動かすためのエンジンみたいなもの。有名なプラグインJqueryってやつですね。このJqueryは1個のファイルを読み込ませればいいだけなんですが、自分のサーバーにおいて読み込ませてもいいし、Googleのサーバー上に置いてあるものを使っても良いですよってもなっているので、それを拝借する記述です。よくわからなければとにかくコピペでOK。

３．body内はこんな感じで試してみる。

<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
<li>
<img src="slide2.jpg" />
</li>
<li>
<img src="slide3.jpg" />
</li>
</ul>
</div>

もし画像がなくっても、試しにやってみよう。それなりに動くはず。
動かなかった場合は、何かが間違っている。Jqueryが読み込まれているか、flexsliderのプラグイン自体（jsファイルね）が読み込まれているか、cssが読み込まれているか、確認してみる。
けっこう私もやっちまうのが、「<ul class="slides">」のクラス「slides」を付け忘れちまうとこかな。
わからなければコメントに質問でも残してくれれば、時間があるとき答えられるかも。
みんな、がんばってくれ！

さて、動かないとかもあるでしょう。
こう動かしたいとかもあるでしょう。
次のページはオプションの日本語訳です。
※オプションの加え方は一番あとで。

2.Flexsliderのオプションの日本語訳・オプションの加え方へ
3.Flexsliderの使い方設定例へ
4.Flexsliderのバグ例へ