レスポンシブflexsliderのサムネイル画像を

質問

始めまして。
レスポンシブデザインのホームページショップを構築中です。
笑い話かも知れませんがホームページビルダー15での制作です。
メインカラムでflexsliderの導入をテストしています。
現在はうまくサムネイル画像横４個の３段の１２個表示で動いています。

ですが３段１２個表示ではサムネイル画像が大き過ぎてスマホでは使い辛いのが現状です。
そこで質問ですが、そのサムネイル画像をメイン画像の幅一杯のサイズで
サムネイル画像２段で１２個の表示の改良は出来るのでしょうか。
また、横一列で６個、８個と表示するにはどうすれば良いのでしょうか。
ネット検索では解答が見つからないので申し訳ありませんが質問させて頂きました。

具体的な方が良いかと思いＵＲＬを表示させて頂きます。
素人ですがネット検索と勉強でレスポンシブショップを構築中です。

試験ページ
http://www.waterplanet.jp/zzzzzflexslider.html

flexslider.css スタイルシート
http://www.waterplanet.jp/style/flexslider.css

.js ファイルです。
http://www.waterplanet.jp/style/jquery.flexslider.js

スライダーは今現在はサムネイル画像１２枚３段で上手く動いています。
クローム、サファリ、ＩＥにもレスポンシブ対応できています。
これを一段に６枚、２段で１２枚のサムネイル画像にしたく思います。
また、一段だけで8枚のサムネイル表示をお教え頂ければ幸いです。
どうしても解決できずに悩み切っております。
ご教示頂けましたら幸いです。
どうか宜しくお願い致します。

回答No.1

hideokamoto · ベストアンサー

２段６列にする場合、下記のCSSを追加することで変更できます。
.flex-control-thumbs li {
width: 16.66%;
width: -webkit-calc(100% / 6);
width: calc( 100% / 6);
}

calc()はCSSの中で計算ができるプロパティで、
IE9以降などのモダンブラウザであればだいたい対応しています。
ですので( 100% / ◆列数◆ )に書き換えてもらうと8枚や12枚なども対応できます。
もっとも、旧ブラウザ向けに計算結果（例では16.66%）を書いておく必要がありますが。