バグ例
バグ例って聞くと自縛霊みたいに聞こえるね…。
ここからはスライダーをカスタマイズしてたりすると出くわすバグやなんかを上げていこうと思う。
みんなも困った現象あったら教えてね。その解消法も教えてくれると、いいね！
flexsliderの中のスライドの一部が、欠ける？
スライドを動かしているときに、なぜかスライドの一部が欠けることがあった。たぶんfont-awesomeを使ってアイコンを表示させていたせいなのだろうが、原因がつかめなくて苦労した。
このCSSがデフォルトで当たっているので、こいつをトルチョックすると解消される場合がある。
-webkit-backface-visibility: hidden;
このプロパティについては↓このページに詳しく書いてあります。
CSS Transformsで画面がちらつくときの対処法
flexsliderでsync使っているときに、ループがうまくいかない
メインの方はうまくループするのに、ナビゲーションとして使っているスライダーが最後まで行くと”ループ”じゃなくて”戻る”になってしまうときがある。
そういうときは、ナビゲーション側の設定に、
slideshow: false
としてみてくれ。スライドショーが設定されていると思わぬ動きをすることがあるようだ。
↓ここも参考になるかも。
https://github.com/woocommerce/FlexSlider/issues/331
flexsliderで「controlsConatiner」「manualControls」を使っているときにオリジナルの「flex-direction-nav」を作るとフリクションする
あとで考えてみると当たり前なんだけれど、「controlsConatiner」をつかったら、こんな感じの
$('.prev, .next').on('click', function(){
var href = $(this).attr('href');
$('.slider').flexslider(href);
return false;
})
オリジナルのダイレクションナビは使えないです。flexsliderが止まります。
（既存のJSに、href="#"でページ内スクロールのJSするように組んであって、それを回避しようとhref="#"がないようなオリジナルのナビゲーションを作ったのだけれど、ナビのボタンを押すと、flexsliderが止まってしまうんですよ。。。よく考えるとわかるんですが、controlsConatiner、manualControlsとぶつかるんです。）
なので、ちゃんとナビゲーションはプラグインから出してあげて、
directionNav: true,
既存のJSにあったhref="#"のオートスクロールに絡まないように修正するのがいいですね。
関数の上書き？とかになるのかなあ。
このときは除外するclassが設定されていたのでそれを拝借して逃げられましたが。。
[…] 参考：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の使い方(デモ)とオプションの日本語訳。レスポンシブスライダー、フリックスライドにも対応 […]