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の事を考えて指定しなければいけないですよね?
雑ですみませんが、画像でまとめてみました。(~_~)
他のサイトを色々見て、スマホを横にした時に表示範囲で画面に均等に画像が表示されるのも良いと思ったのですが、どうでしょうか?これだと、表示画像が小さくなりますよね?
宜しくお願いします。
.swiper-container { width: 70%;}
にしたら左右の矢印のスペースは確保された。
そしたら、画像が途中で切れてしまうので、
何か%指定が必要な気がする。
ちがうかな。
真中さん
お返事ありがとうございます!
そうなんです!画像が切れてしまうんです。
pxで指定しても切れてしまうので、どこに%指定するのか。
どこが間違えてるのか、困ってます(-..-)
ピンバック: スマートフォン向け jQuery touch slide swipeで画像表示させる その2(解決) | パソコン倶楽部りんご