日別アーカイブ: 2013年11月7日

スマートフォン向け jQuery touch slide swipeで画像表示させる

Android、iphone、ipadなどで、スワイプ(フリック)操作による画像切り替えをしたいです。
2013-10-18 Friday 勉強会の議事録
jQuery Slide Panel
真中さんのサイトを参考に、jQuery本体を読み込む方法をやりました。
jQuery carousel

スワイプの参考サイトはhttp://www.idangero.us/sliders/swiper/demos.php
DemosのDefaultを参考にしています。
スワイプ(フリック)操作による画像切り替えをするまではできました。
作業中のページは商品詳細ページ
できれば、スマホで見て下さい。m(-..-)m
.device(外枠の黒い部分)width 100%にしました。
画像を読み込んだのですが、画像サイズの指定がうまくいきません。
画像をきちんと表示させるには、%で指定するのでしょうか?
CSSの問題ですよね?その場合、paddingやmarginの事を考えて指定しなければいけないですよね?
雑ですみませんが、画像でまとめてみました。(~_~)

他のサイトを色々見て、スマホを横にした時に表示範囲で画面に均等に画像が表示されるのも良いと思ったのですが、どうでしょうか?これだと、表示画像が小さくなりますよね?

宜しくお願いします。