こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

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

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

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

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

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

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

投稿日時 - 2014-07-22 14:01:40

QNo.8688018

すぐに回答ほしいです

質問者が選んだベストアンサー

2段6列にする場合、下記の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%)を書いておく必要がありますが。

投稿日時 - 2014-07-24 09:33:29

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問