どうも。
最近、毎回書くたびに言っていますが、ご無沙汰してますｗ
今回の主役は、使っている人もかなり多いんじゃないですかね。
「flexslider」
です。
使い方はまた今度ゆっくりと書きますｗ
今回はflexslider初心者の方向けではなく、中級者くらいまでの方が対象ですかねー。
さて、このflexsliderですが、使うとUIがかなり良くなるjQueryプラグインです。
よく使われるのは、トップページのキービジュアル部分とか、商品ページの画像部分とかが多いですね。
使い勝手がよく、初心者でもなんとなく使えてしまうすごくいい感じのものです。
私も結構お世話になっているのですが、オリジナルで書いたJS（jQuery）が干渉してしまったことがあって、使うときは恐る恐る使っていますｗ
このプラグインの素晴らしいところは、紹介ページで汎用性が高い使い方を紹介しているのですが、ダウンロードするときにそれらのデモファイルが全て入っているのです。
なので、初心者でもコピペするだけで簡単に設置することができてしまうのです。
これを開発した人はかなりお優しい方なんですねー。
素晴らしい。。
で、本題に入りますが、今回もサイトに設置しようとしたら、なんとflexsliderが正常に動作しなかったのです。。。
しかも、GoogleChrome限定で！
さらにたちが悪いのが、開発者ツールとか「ページのソースを見る」でソースを開くとちゃんと動くようになるのですｗ
腹立つでしょ～ｗｗ
Firefoxでは問題なく動作するんですよ。
iPhoneでも問題ないんです。
Chrome限定。
ややこしい。。。
ということで、いつもの如く調査開始です。
flexsliderの使い方は、サムネイルとメイン画像を連動させるパターン。
動かないのは、サムネイルのスライド。矢印を押しても動かない。
でも、右矢印をクリックすると左矢印が出る。
なんか、なんとなく動きは見せている模様。
まずは、干渉してそうなJSを見て削除→変わらず
次に、flexslider関連以外のスクリプトを削除→変わらず
ということで、現在記述されているJSとは関係ないものであることがわかりました。
ちょっとホッとしました。
では、何がいけないのか？
こうなるとちょっとよくわからないので、神を召喚します。
・・・えぇ、Google先生です。
同じような症状が出ている人はいないかなぁ～。。。ポチポチ。。。
・・・・・
そんな奴、いませんでした。
２日くらい検索しまくりました。
怪しいと思った文献は読みまくりました。
みんな、全然チガウコトカイテイマシタ。
48時間カエセ。
ということで、ここまで来たらもう自力で解決するしかありませんので、ソースを削りながらブラウザ更新をひたすら繰り返します。
ですが、全く改善される気配を見せない。。なかなか手ごわい。
かといって、クライアントに「こういう仕様なので我慢してください。」なんてとてもじゃあないが言えない。
意地でも解決しなければ金がもらえん！
仕方がないので、ここで最終奥義。
先ほどflexsliderを紹介した時にちょっと書きましたが、ダウンロードしたファイルにデモファイルが含まれています。
こちらが正常に動作していることを確認し、その正常に動作しているHTMLとJSをコピーして貼り付けて動作確認。
・・・動いた。。。ちゃんと動いているやん。。。なんじゃい。
。。。ということは、恐らく問題はセットしたクラス名やID名かCSSなのでは？
ということで、ul内のli部分を変えて動作確認→動く！
・・・ということは？あとソースで違うところは？
ulタグの外のdiv（#carousel）にセットされていたclassだ！
では、そのセットされていたclassを削除し、動作確認→動いた！
じゃあこのclassはなんだ！？どんな役割をしている？スタイルは？
調査した結果、JSには記述無し、CSSを見るとなんとdisplay:flex;がセットされている！
原因はこれか！！
念のため、インラインでflexを追加→動かず！
ということで、原因はこれでした。
勉強になりました。
flexsliderを使うときは、なるべく少ないスタイルで、特にflexはセットする時は要注意！
サムネイルと連動させる場合はそのブロックにはdisplay:flex;を追加しないように！
これで何とかトラブルは解決し、クライアントへ納品。
無事請求書も提出。
もしかしたら、同じことで悩んでいる人がいるかもしれないと思ったので書いておきました。
以上！
ではまた！
あーつかれた！