FlexSliderでカルーセル♪ の続き。
なかなか思うようにはいかなかったのだけど、なんとか付けてみた。
一番上手くいかなかったのは、.flexslider に余白を入れると、下にある●印のナビゲーション「Control Nav」の位置がずれてしまったこと。解決策は分からなかったので、、ごまかしてみた。
気に入ってるのは新機能らしい、いくつずつスライドするか？決まった数を設定できること。
今回は、３つずつスライドさせてみました。
その場合は<head>内のJavascript に
move: 3,
と書き足すだけです。
こんな感じになってます。ちょっと分かりにくいですが、自然食品 かねこやTOPページの真ん中辺りです。。。
一番最後まで行ったら、続いて最初の画像を表示してくれるのではなく、逆走で最初の画像まで戻るところがちょっと希望とは違うんだけれど、、。
ファイルのダウンロードは、
FlexSlider ／ Woo Themes または、woothemes / FlexSlider | github から。ダウンロードすると、たくさんファイルが入っていて、最低限何が必要なのか、
ちょっと分かりにくいです。。最低限必要なのは、
jquery.flexslider.js
flexslider.css
左右に出る矢印の画像
だと思いますよー。
その他、参考にさせていただいたページは以下です。
このFlexSliderは、スライダーにもカルーセルにもなるのだけど、スライダーで使われてる方が多いのかな。レスポンシブ（スマートフォンでも何でも横幅にあわせて自動調整）ってことだね。
16進数形式をRGB,RGBAに変換するだけ●印のナビゲーターの色の変更に。
レスポンシブなコンテンツスライダーのjQueryプラグイン-FLEXSLIDER軽量スライダー「FlexSlider.js」の実装メモスマートフォン対応の画像スライダーjQueryプラグインのレスポンシブな軽量スライダー「FLEXSLIDER」の使い方や設定方法-----------------------------------------
自然食品・マクロビオティック・アレルギー対応商品♪
自然食品・有機米かねこや
----------------------------------------------------------------------
