スマートフォン向け 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の事を考えて指定しなければいけないですよね?
雑ですみませんが、画像でまとめてみました。(~_~)

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

宜しくお願いします。

スマートフォン向け jQuery touch slide swipeで画像表示させる」への3件のフィードバック

  1. 真中のぶ真中のぶ

    .swiper-container { width: 70%;}
    にしたら左右の矢印のスペースは確保された。
    そしたら、画像が途中で切れてしまうので、
    何か%指定が必要な気がする。
    ちがうかな。

    返信
    1. kanedakaneda 投稿作成者

      真中さん
      お返事ありがとうございます!
      そうなんです!画像が切れてしまうんです。
      pxで指定しても切れてしまうので、どこに%指定するのか。
      どこが間違えてるのか、困ってます(-..-)

      返信
  2. ピンバック: スマートフォン向け jQuery touch slide swipeで画像表示させる その2(解決) | パソコン倶楽部りんご

真中のぶ へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.