こうやって、恥ずかしながら制作過程を記事にしているのも、
なまけものの自分を働かせるためです。


さて、メニューができたところで、コンテンツです。

それぞれの商品は、説明ページとラインナップページで構成されています。

説明ページは、文章を並べるだけなので問題ないでしょう。

ラインナップは、バリエーションの多さから、
スライダー・カルーセルは欠かせません。

現在のは古く、
jQuery の他に数種類の JavaScript を読み込ませなければいけませんでした。

今は、たくさんでてるんですね！


いろいろ試した結果、Sulider Pro にしました。

一番簡単だったからです。
オプションを true か falus にするかだけでカスタマイズできちゃいます。


今は、脱 jQuery が主流になりつつあるとのこと。
（これもしらなかった・・・。）

でも、私のような script 書けない組には、まだまだありがたいです。
カスタマイズくらいだったらなんとかなりますもんね。

css のカルーセルも試したけど、思った動きにすることができませんでした。
（ちょっとなさけない・・・。）


順調〜！ って思っていたところ。 また思わぬ落とし穴が！！

これ、イメージが 2枚だとうまく動かないんだ？
3枚でも、私の iPhone では画面がチラチラする？！

えー・・・こういう時、私はやっぱり力技。

どうせループさせるんだから、倍にしちゃおう！

ボタンを付けるんだったらそうはいかないけど、付けないしね。
メイン商品のバリエーションは、十数〜二十数パターンあるのです。
スマホで見るのを想定して、そんなにボタンが並んでもねぇ？

script が書けるのであれば、
3枚以下ならイメージを2倍にしてボタンは半分にするようにできそう。

なんども言っちゃう。 私は書けません！

ちなみに、ループさせないんだったら大丈夫っぽいよ？


あと、キャプション。

ディレイを指定したら一周してループに入る時点で、
ガクッと引っかかりとチラつきが出た。

OS・ブラウザー環境によるのかもしれないけど、
使いやすさ重視でシンプルなままにしました。

こっちも、ループさせなければ・・・ということです。

矢印の大きさと色・位置を css で書きかえ。
あっ、css は、mini じゃないほうです。

こっちは、本当に簡単！




responsive を true にして、準備完了。


よしよし！ 結果オーライで！！

関連記事

• リニューアルしなければ！vol.04 【flexboxで楽々？】
• リニューアルしなければ！vol.03 【スライダーどうする？】
• リニューアルしなければ！vol.02 【メニューどうする？】