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のバグ例へ
[…] 参考：flexslider-Jqueryスライダーの使い方とオプション日本語訳。レスポンシブ、フリックスライドにも対応 | 焦点 […]
始めまして。山田と言います。
独学でネットショップを構築しを運営しています。
制作ソフトは恥ずかしいですがＨＰＢ16です。
今、これまで何年も眠らせてしまっていたショップの復活を期して、
レスポンシブ化したスマホ主体のネットショップを構築中です。
動的に商品を見せるのに「FlexSlider」を使っています。
今現在もクローム、サファリ、ＩＥともに上手くレスポンシブして機能しています。
ただ今現在はメイン画像の下にサムネイル画像が横1段に4個。
それが3段で合計12枚のスライダー表示となっています。
縦長の画像の表示なのでスマホ画面ではサムネイル画像が大き過ぎ
クリック出来なくなっているのが現状で困っています。
サムネイルを一行に6画像。2行で12枚の画像表示にしたく思っています。
また、1行でサムネイル8画像等も出来れば有難いのですが。
http://www.waterplanet.jp/zzzzzflexslider.html
色々ネットでも調べますが全く解答は出て来ません。
flexslider.css スタイルシート
http://www.waterplanet.jp/style/flexslider.css
.js ファイルです。
http://www.waterplanet.jp/style/jquery.flexslider.js
突然のぶしつけな質問で大変申し訳ありませんが、
本当に困っております。
ご教示を頂けますと有難く思っております。
もし可能でしたら宜しくお願い致します。
.flex-control-thumbs li {width: 25%; float:
left; margin: 0;}
ここのwidthを16.6%とかにすれば六個に並ぶんじゃないですかね。
もし画面サイズで分岐したければCSSのメディアサイズ（わからなければ調べてみてください）でスマフォ、PC、タブレットごとに並びを調整できるはずです。
どちらかと言うとjavascriptのプラグインうんぬんというよりもCSSの問題ですね。
ありがとうございます。
早速アドバイス頂いた通りcssの記述を一部変えたら思い通りに行きました。
私自身、「four」や「4」の1/4としてcssやscriptから探しても無かった筈ですね。
まさか％での分割とは思いませんでした。
本当に早速のアドバイス有難うございました。
約５日間悩んでいた胸のつかえが取れてスッキリ！です。
重ね重ね有難うございました。
すみません、追伸です。
Flexslider以外にもテストしているスライダーがあります。
こちらはサムネイル画像表示数を予めカスタマイズ出来る前提のものです。
日本人の方の制作された非常に優れた作品と思います。
ただ、問題が有ります。レスポンシブ化されているのですが、
カラム内での取り決めがないのでスマホ画面程度に
ブラウザを縮めたタブレット縦画面ではレスポンシブが効かずに
スライダーがメインカラムを飛び出し、サブカラムに覆い被さってしまいます。
http://www.waterplanet.jp/02-shop/01-r3/r3-707/r3wp-707.html#link
制作者の方にお伺いしましたがやはり現在の構成上はカラム内での設置は
想定していなかったのでこのままでは無理と言う事でした。
そこで今回の「FlexSlider」に変えようと思ったのですが、
サムネイル表示画像数がネックとなり困り切っています。
もし宜しければアドバイス頂けますと有難く思います。
お世話になります。宜しくお願い申し上げます。Windows 8.1 にて「flexslider」を用いたホームページを作成し、全く問題無く動作しております。
ところが、Ｗｉｎｄｏｗｓ ＸＰ機では、「Ｇｏｏｇｌｅ Ｃｈｒｏｍｅ」では、正常に動作するのですが、
Ｉｎｔｅｒｎｅｔ Ｅｘｐｌｏｒｅｒ ８ で表示させると、画面の右側に次に表示する画面がくっついて表示されてしまいます。右側の画面は、本来の表示枠の外まではみ出しています。管理者ツールを使用したのですが、原因がわかりません。ＣＳＳも見てみたのですが、管理者ツールで表示された様な不具合が見わたらないです。
どこをどう直したら良いのかご教授をお願い致します。
]
Ｉｎｔｅｒｎｅｔ Ｅｘｐｌｏｒｅｒ 8が問題で、WINDOWSのOSの違いはとりあえず排除していいと思います。
たぶん、なんかしらの影響でOverflowがはずれているんじゃないでしょうか。
.flexslider {overflow:hidden !important;
}
をCSSに付け足して試してみてください。
なんででしょうかねえ。。。
サイトがとっても役に立ちました。ありがとうございます。 参考URL：http://www.webteq.site/archives/354
http://www.nanairoweb.com/flexslider2
[…] 解説サイト スライダーの使い方とオプション日本語訳。レスポンシブ、フリックスライドにも対応 | 焦点 […]
初めまして。
またこちらの記事が公開されてからお時間が経過しているところすみません。
flexsliderを利用しているWPTutsバージョン: 2.0.0というテーマを利用しております。
http://maki-maki.sakura.ne.jp/neko/
こちらのトップページにスライドがあるのですが、画像は全て自動で切り抜かれてしまうため
cssでは制御できません。
縦長の写真も横長の写真も全体を表示したいのですが、どこで切り抜いた写真を生成するよう記述されているのか。。
多分flexsliderのjqeryなのかな？と思ったりするのですが、まったくわかりません。
どうかご教授頂けましたら幸いです。
flexsliderのjqeryでは画像の切り抜きとかの作業は担わないと思います。
CSSでマスク（部分的に隠すこと）するか、実画像をWordpress（実際はサーバーの画像アプリ）で切り抜きするのが通常です。
サイトを拝見したところ、実際の画像が切られていますね。こんな感じで。
http://maki-maki.sakura.ne.jp/neko/wp-content/uploads/2016/09/DSC4643-620×320.jpg
本当はこんな感じで縦長なんですね？
http://maki-maki.sakura.ne.jp/neko/2016/09/30/%E3%83%86%E3%82%B9%E3%83%884/
WPTutsというテーマの設定か、Wordpressのメディアサイズの設定で解決できれば一番楽だと思いますが、そのような回避で済むのかこちらではわかりません。
まず手順になりますが、以下のように解決を進めていくとよいと思います。
１．どのように表示されるとベストなのかをまとめる。縦なら切られないで左右余白が出ても縦が全部入るように、とかとか。
２．それがテーマやWordpressで解決できるかどうか探す
３．ない場合はあきらめるか、テーマファイルのプログラムいじりに挑戦する。
４．プログラムいじりする場合は、flexsliderが記述されているあたりを探し、そこのかいてあるプログラムを追っていく、、、
となっていくと思いますが、プログラムは慣れていないとかなり難しいかもしれません。楽しいんですがね。
もし３．まで行って躓いたらテーマファイルを配布しているURLでも記載してみてください。
：追記です。
たぶんですが、テーマファイルの中に「large」でthumbnailを設定しているところがあるかもしれません。それをfullに変えると解消すかも？とか思いました。あくまでご参考までにしてください。
[…] すすめ flexsliderの使い方(デモ)とオプションの日本語訳。レスポンシブスライダー、フリックスライドにも対応 […]