USAGE , options
※Booleanっていうのは「true」と「false」で設定できる型、intとかIntegerっていうのは「整数」で設定できる型、という意味です。
| Options - オプション | ||
|---|---|---|
| namespace: "flex-", | 【NEW】スライダーが生成するタグすべてに付与するクラス名の接頭辞。デフォルトは"flex-" | String |
| selector: ".slides > li", | 【NEW】各スライドのタグを指定できる。デフォルトはli。 | Selector |
| animation: "fade", | アニメーションタイプの指定。フェードかスライド。"fade"または"slide"で指定。 | String |
| easing: "swing", | 【NEW】Jqueryのイージングが使える。「jQuery easing plugin」もサポート。デフォルトは"swing"。 | String |
| direction: "horizontal", | スライドの方向指定。「たて」と「よこ」がある。デフォルトは"horizontal"（水平つまり『よこ』ってことね）。"horizontal"または"vertical"で指定。 | String |
| reverse: false, | 【NEW】アニメーションの進む方向を、「戻していく」か「最初に戻るか」。"true" か "false" で指定。 | Boolean |
| animationLoop: true, | ループにするかどうか。"true" か "false" で指定。もしfalseの（ループしない）とき、directionNavは最後のところで"disable"クラスを受け取ります。 ※カルーセル（1セルに複数セルを内包させるヤツ。文字通り回転木馬みたいなヤツね。）で表示するときにはループが効かないようです。そのほかにもループしてくれるしてくれない場面は想定できるので、注意です。 |
Boolean |
| smoothHeight: false, | 【NEW】よこスライドモードのとき、スライド高さをスムーズに設定させるかどうか。"true" か "false" で指定。 | Boolean |
| startAt: 0, | 何番目のスライドからスタートするか。0から始まる整数で指定。 | Integer |
| slideshow: true, | 自動でスライドショーするかしないか。"true" か "false" で指定。 | Boolean |
| slideshowSpeed: 7000, | スライドショーの停止スピード指定。デフォルトは7秒。ミリセコンド秒で設定。（1秒＝1000） | Integer |
| animationSpeed: 600, | スライドの動くスピード。デフォルトは0.6秒。ミリセコンド秒で設定。（1秒＝1000） | Integer |
| initDelay: 0, | 【NEW】初期のディレイ。ミリセコンド秒で設定。（1秒＝1000） | Integer |
| randomize: false, | 順番をランダムに。"true" か "false" で指定。 | Boolean |
| Usability features | ||
| pauseOnAction: true, | スライドショーを設定している場合で、スライド上で何らかの操作がされているとき、スライドショーを一時停止するかしないか。"true" か "false" で指定。スライドショーのときはやっておいたほうがいい。 | Boolean |
| pauseOnHover: false, | スライドショーを設定している場合で、スライド上にマウスオン時に、スライドショーを一時停止するかしないか。"true" か "false" で指定。スライドショーのときはやっておいたほうがいい。 | Boolean |
| useCSS: true, | 【NEW】CSS3 transitions対応ブラウザではCSS3によるアニメーションを行うか行わないか。行わない場合はJavascriptで行われる。"true" か "false" で指定。 ※あるブラウザでは動いたのに、このブラウザでは動きませんとかになったらfalseにしてみる。iPhone5s iOS7ではfalseに。CSSの方が滑らか。 |
Boolean |
| touch: true, | 【NEW】スワイプをさせるかさせないか。"true" か "false" で指定。もしスマートフォンやタブレットなどのモバイルデバイスでflexsliderを使用するときにはtrueにしておきたいオプションだ。だが、もし単なるフェードするスライドなどで使用する場合は、一度スライドにタッチしてしまうとpauseがかかったまま停まってしまうので、注意が必要だ。 | Boolean |
| video: false, | もしスライダー内でビデオを使う場合、グラフィカルな問題が起こりやすいので、それを避けるためCSSアニメーションは使用したくないときはtrue。(？flaseか？どっちも試してみるべし) | Boolean |
| Primary Controls 横に出てくる矢印とか、下に出てくる球々のナビゲーション関連 |
||
| controlNav: true, | ページングコントロールを生成するかしないか。"true" か "false" で指定。 ※手動でコントロールを置く場合はtrueにしておく |
Boolean |
| directionNav: true, | ページ送り（次へ／前へ）を生成するかしないか。"true" か "false" で指定。 | Boolean |
| prevText: "Previous", | 「前へ」ボタンのテキストの変更ができる。デフォルトは"Previous" | String |
| nextText: "Next", | 「次へ」ボタンのテキストの変更ができる。デフォルトは"Next" | String |
| Secondary Navigation キーボード、マウスホイールなんかの設定などなど |
||
| keyboard: true, | キーボードの右左カーソルキーでの操作を有効にするかしないか。"true" か "false" で指定。 | Boolean |
| multipleKeyboard: false, | 【NEW】 複数のスライダーにキーボード操作を許可するかしないか。デフォルトでは一個以上のスライダーには許可しない設定になっている。 ※試したことないんですけど、許可すると一斉に動くっていうことかな？ |
Boolean |
| mousewheel: false, | マウスホイールでの操作をさせるかさせないか。 jquery.mousewheel.js マウスホイール用プラグインを読み込ませる必要あり。 |
Boolean |
| pausePlay: false, | 再生ボタンを生成するかしないか。 | Boolean |
| pauseText: 'Pause', | 再生ボタンの『再生時』のときのテキスト指定。デフォルトは'Pause'。 | String |
| playText: 'Play', | 再生ボタンの『一時静止時』のときのテキスト指定。デフォルトは'Play'。 | String |
| Special properties | ||
| controlsContainer: "", | クラスセレクターを変えたいときは指定。例としては ".flexslider-container"とか。対象要素が見つからなかった場合はコントロールコンテナ―は作成されず、無視されます。 | {UPDATED} Selector |
| manualControls: "", |
カスタムコントロールを使いたいときにはここで宣言。 例えば".flex-control-nav li" とか "#tabs-nav li img",とかと、目標のセレクターを宣言します。 自分でコントロールナビを作りたいときに指定するわけだから、目標の要素の数をスライドの数と合わせるべきです。 |
Selector |
| sync: "", | 【NEW】二つのスライダーを同期させるオプション。注意要。２つの離れたエリアを同時に動かしたいときに使ったことがあるよ。そういうときにゃ便利。 | Selector |
| asNavFor: "", | サムネイルナビゲーションを使うときに親スライダーと紐付けるときのオプション。親スライダーのセレクターを指定。 | Selector |
| Carousel Options ※カルーセルで見せたいとき （回転木馬つまり複数個のスライドを1セルづつにして見せたいとき） |
||
| itemWidth: 0, | 【NEW】各スライドの幅。ピクセル数で指定。ボーダーライン、パディングも含んだ大きさ。 | Integer |
| itemMargin: 0, | 【NEW】各スライドのマージン。 ※これは他のスライダーでも必ずつけて欲しいオプションだ。CSSで設定した値を合算していれておけば自動的に余りなくスライドを配置してくれる。 |
Integer |
| minItems: 0, | 【NEW】最低スライド数。これよりも少ないときはリサイズされる。 | Integer |
| maxItems: 0, | 【NEW】最大表示スライド数。これよりも多いときはリサイズされる。 | Integer |
| move: 0, | 一回のスライドアニメーションで送って欲しいスライドの数。0を指定すると、表示されているスライドすべてが送られる。 | Integer |
| CallBack- コールバック （コールバックとはなんらかの動作（イベント）が起こったときに 『呼び出し』したいものがあるときに使う。 覚えておくとけっこう使える。） 【例】start:function(){※ここにスクリプトを書く} |
||
| start: function(){}, | 最初のスライドがロードされた瞬間に発生するコールバック。 | Callback |
| before: function(){}, | それぞれのスライドが動くときに発生するコールバック。 | Callback |
| after: function(){}, | それぞれのスライドが動き終わったときに発生するコールバック。 | Callback |
| end: function(){}, | スライドが最後まで着いたときに発生するコールバック。 | Callback |
| added: function(){}, | 【NEW】スライドが追加されたときに発生するコールバック。 | Callback |
| removed: function(){} | 【NEW】スライドが削除されたときに発生するコールバック。 | Callback |
| Structures - 構成 ※最初のうちはあんまり気にしないで良いところ カスタマイズをもりもりやる場合には必要になってくる。 |
||
| slider | スライダー要素自身。平たく言えば元になっている要素。function()のカッコに代入することで取得できる。オブジェクト。 | Object |
| slider.container | スライダー要素の中にあるul要素。これも構成要素としては重要。 ulにクラス.slidesを打って使うよね。オブジェクト。 | Object |
| slider.slides | スライドされる各スライド要素。オブジェクト。 | Object |
| slider.count | 各スライドの個数。整数。 | Int |
| slider.currentSlide | 現在のスライド。整数。 | Int |
| slider.animatingTo | .before()の関数に含ませると便利。どのスライドへアニメーションしているかの整数。 | Int |
| slider.animating | スライドがアニメーション中かどうか。trueかfalse。 | Boolean |
| slider.atEnd | スライドが最後に到達したかどうか。trueかfalse。 | Boolean |
| slider.manualPause | マウスオンによる強制停止イベント。trueかfalse。 | Boolean |
| slider.controlNav | コントロールナビゲーション。オブジェクト。 | Object |
| slider.directionNav | 左右のナビゲーション。オブジェクト。 | Object |
| slider.controlsContainer | コントローラーのコンテナ。オブジェクト。 | Object |
| slider.manualControls | The manualControls element of the slider。オブジェクト。 | Object |
| slider.flexAnimate(target) | スライドを動かす。カッコ内に (target, pause) とパラメータ―を打って関数として使用。 | Function |
| slider.pause() | スライドショーの一時停止。関数として使用。 | Function |
| slider.play() | スライドショーの再開。関数として使用。 | Function |
| slider.canAdvance(target) | returns boolean if slider can advance - (target) parameter | Function |
| slider.getTarget(dir) | get target given a direction - "next" or "prev" parameter | Function |
※flexsliderを呼び出してスライダーを表示させたのだけれど、キャンセルして「スライドはなし！」ってことにしたいとき
一回呼び出したものをヤメることを「destroy」（デストロイ）と表現されることが多い。
flexsliderにはdestroyは元々は用意されていない。
PCではスライダーだけれど、スマフォじゃあスライダーはヤメ、みたいなことをしたいときはよくある。
そこで、destroy付きのjavascriptを用意してくれた人がいる。
https://github.com/bradgreens/FlexSlider/blob/release-2-2-0/jquery.flexslider.js
このJSファイルに取り替えると、
$("#target").flexslider("destroy");
※#targetは自分のソースにあわせて書き換えてね。
とするだけでflexsliderをキャンセルできるのだ。
※flexsliderを呼び出してスライダーを表示させたのだけれど、ウィンドウサイズによってリサイズしてほしいとき
flexsliderはもともとレスポンシブ対応しているのでリサイズにも強いのだが、カルーセル設定とかしているときにどうもリサイズしてくれないときがある。
$(window).resize(function(){
$("#target").flexslider("resize");
});
※#targetは自分のソースにあわせて書き換えてね。
とするだけでflexsliderがウィンドウの変化によってリサイズしてくれるようになる。これでもリサイズしてくれなかったら、、、。
もしかするとバグかもしれない。新しいバージョンには確かにそのバグは存在する。
なので、私はv2.2.0あたりを使っている。安定していると思うよ。
destroyで解説したフォークされたコードもv2.2.0だから、↓これに交換すると直るかもよ。
https://github.com/bradgreens/FlexSlider/blob/release-2-2-0/jquery.flexslider.js
オプションの加え方。
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
touch: true,
start: function(){alert('始まりました。スタートしたときのコールバックです')},
animationLoop: true
});
});
</script>
[カンマ]区切りで、いくらでも加えてみてください。最後のやつにはいりません。
まずはひとつお試しを。
使ってみてからわかるものです。
次のページに例を二つほど挙げてみました。
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の使い方(デモ)とオプションの日本語訳。レスポンシブスライダー、フリックスライドにも対応 […]