前回質問したスマートフォン向け jQuery touch slide swipeで画像表示させるについて、ひとまず解決したので内容を書きます。
これは、カラーミーの商品詳細ページ（スマートフォンのテンプレート）で使用しました。
カラーミーはプランによって、商品詳細ページに掲載できる画像の枚数が決まっています。
私は４枚までのプランなので、今回は４枚の画像をスワイプさせました。
カラーミーショップは独自タグがあって画像を読み込む為に、if文？が使われています。
これがカスタマイズする時に、探し出すのが少し難しいのです。
今回は１枚目の画像とカラーミーのデフォルトで、<商品画像その他>とわかれている部分を４枚連続で表示できるようにhtmlを変更してます。そこに、下記のCSSを使用しました。CSSはコメントアウトしてる部分を変更しました。
※今回の大事な所
.deviceを100%
.swiper-containerにmax-width
他にも大事な指定はあると思いますが、ここが大事なのかな？と思います。
スマホを縦にした時は全体画像が見えて、画像の上に矢印が見えるようになります（矢印にz-indexを指定）。
横にスマホを回転した時は画像の大きさはそのままで、.deviceが100%になります。
画像の大きさを100％にすると横に回転した時に、商品の全体画像の一部が表示されて全体画像が見えないので、画像サイズは固定したほうが見やすいと思いました。
公開したページ（スマートフォン用）こちら
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!--商品画像--> <div class="device"> <a class="arrow-left" href="#"></a> <a class="arrow-right" href="#"></a> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><{if $product.img_url != ""}> <img id="swipe_image" src="<{$product.img_url}>" alt="<{$product_name}>の画像"> <{else}> <img id="swipe_image" src="http://img.shop-pro.jp/tmpl_img/13/now200.gif" alt="NOW PRINTINGの画像"> <{/if}></div> <div class="swiper-slide"><{if $product.ot1_url != ""}> <img src="<{$product.ot1_url}>" alt="<{$product_name}>の画像"> <{/if}></div> <div class="swiper-slide"><{if $product.ot2_url != ""}> <img src="<{$product.ot2_url}>" alt="<{$product_name}>の画像"> <{/if}></div> <div class="swiper-slide"><{if $product.ot3_url != ""}> <img src="<{$product.ot3_url}>" alt="<{$product_name}>の画像"> <{/if}></div> </div> </div> <div class="pagination"></div> </div> <!--/商品画像--> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
/* =============================================================== Basic Swiper Styles ================================================================*/ .swiper-container { margin:0 auto; position:relative; overflow:hidden; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden; /* Fix of Webkit flickering */ z-index:1; } .swiper-wrapper { position:relative; width:100%; -webkit-transition-property:-webkit-transform, left, top; -webkit-transition-duration:0s; -webkit-transform:translate3d(0px,0,0); -webkit-transition-timing-function:ease; -moz-transition-property:-moz-transform, left, top; -moz-transition-duration:0s; -moz-transform:translate3d(0px,0,0); -moz-transition-timing-function:ease; -o-transition-property:-o-transform, left, top; -o-transition-duration:0s; -o-transform:translate3d(0px,0,0); -o-transition-timing-function:ease; -o-transform:translate(0px,0px); -ms-transition-property:-ms-transform, left, top; -ms-transition-duration:0s; -ms-transform:translate3d(0px,0,0); -ms-transition-timing-function:ease; transition-property:transform, left, top; transition-duration:0s; transform:translate3d(0px,0,0); transition-timing-function:ease; } .swiper-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { float: left; } /* IE10 Windows Phone 8 Fixes */ .swiper-wp8-horizontal { -ms-touch-action: pan-y; } .swiper-wp8-vertical { -ms-touch-action: pan-x; } /* Demo Syles */ body { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5; } .device { width: 100%;/*-----外枠のBOXサイズ-----*/ height: 300px;/*-----高さ指定-----*/ padding: 30px 0; background: #f2f2f2; margin: 5px auto; position: relative; } .device .arrow-left { background: url(http://micco.pupu.jp/js/Swiper/img/arrows-2.png) no-repeat left top; position: absolute; left: 10px; top: 50%; margin-top: -15px; width: 17px; height: 30px; z-index: 4;/*-----矢印を画像の上に表示させる-----*/ } .device .arrow-right { background: url(http://micco.pupu.jp/js/Swiper/img/arrows-2.png) no-repeat left bottom; position: absolute; right: 10px; top: 50%; margin-top: -15px; width: 17px; height: 30px; z-index: 4;/*-----矢印を画像の上に表示させる-----*/ } .swiper-container { margin:0 auto; height: 100%; max-width: 300px;/*-----画像をスマートフォンを横にしても画像サイズが変わらないように指定-----*/ } .content-slide { padding: 20px; color: #fff; } .pagination { position: absolute; left: 0; text-align: center; bottom:5px; width: 100%; } .swiper-pagination-switch { display: inline-block; width: 10px; height: 10px; border-radius: 10px; background: #999; box-shadow: 0px 1px 2px #555 inset; margin: 0 3px; cursor: pointer; } .swiper-active-switch { background: #fff; } |
こんなに長くなりましたが、まとめてみました。
足りない所があると思います。
まだまだこれからも、カラーミーショップのテンプレート(PCとスマートフォン)をカスタマイズしていくつもりです。
また、宜しくお願いします!
ありがとうございまいた。
kanedaさん、うまく行って良かったですね。
レポートありがとう。