レスポンシブサイト(カフェ検索ダミーサイト)を制作しているのですが、
swiper(jQuery不要)を利用してみました。
利用した部分は、以前「テーブルタグを組んだ際、結合をしてしまいレスポンシブで崩れる」
という趣旨の質問をさせていただき、テーブル以外にするよう教えていただきましたため、
修正をしている最中の部分です。(写真部分を結合しました)
お手数ですが、ご教授いただけませんでしょうか。
エラー部分
1つめのswiperの実装とお店情報掲載は成功しましたが、
2つ目のお店以降が崩れてしまいました。
エラー部分の写真
店名、写真三枚(swiper部分)、お店情報で1つのグループになる想定でした。
私の考え方
- 以前崩れたのが写真部分だったので、swiperに変更した。
- 現在残しているテーブル部分は結合なしなので崩れない
- 各お店をセクションで分けているので、うまく行くと思った。
※divにしても同様に崩れました。
コード
html
1~~~略~~~ 2 <script> 3 window.addEventListener('DOMContentLoaded', function() { 4 var swiper03 = new Swiper('.swiper-pics .swiper-container', { 5 pagination: '.swiper-pagination', 6 paginationClickable: true, 7 nextButton: '.swiper-button-next', 8 prevButton: '.swiper-button-prev', 9 loop: true, 10 slidesPerView: 3, 11 centeredSlides: true, 12 slideToClickedSlide: true, 13 spaceBetween: 10, 14 breakpoints: { 15 543: { 16 slidesPerView: 2 17 } 18 } 19 }); 20 }, false); 21 22 </script> 23 24~~~略~~~ 25 <!--ここからお店紹介--> 26 27 <section class="info"> 28 <h3 id="target01">店名</h3> 29 30 <div class="swiper-pics"> 31 <div class="swiper-container"> 32 <div class="swiper-wrapper"> 33 <div class="swiper-slide"><img src="../img/01.png"></div> 34 <div class="swiper-slide"><img src="../img/02.png"></div> 35 <div class="swiper-slide"><img src="../img/coming_soon.gif"></div> 36 </div> 37 38 <div class="swiper-button-prev"></div> 39 <div class="swiper-button-next"></div> 40 41 <div class="swiper-pagination"></div> 42 </div> 43 </div> 44 45 <table> 46 <tr> 47 <th>住所</th> 48 <td>住所</td> 49 </tr> 50 51 <tr> 52 <th>電話番号</th> 53 <td>111-1111-1111</td> 54 </tr> 55 56 <tr> 57 <th>営業時間</th> 58 <td>11:30~</td> 59 </tr> 60 61 <tr> 62 <th>価格</th> 63 <td>500円</td> 64 </tr> 65 66 <tr> 67 <th>コメント</th> 68 <td>ああああああ</td> 69 </tr> 70 </table> 71 </section> 72 73 74 <section class="info"> 75 <h3 id="target02">店名</h3> 76 77 <div class="swiper-pics"> 78 <div class="swiper-container"> 79 <div class="swiper-wrapper"> 80 <div class="swiper-slide"><img src="../img/01.png"></div> 81 <div class="swiper-slide"><img src="../img/02.png"></div> 82 <div class="swiper-slide"><img src="../img/coming_soon.gif"></div> 83 </div> 84 85 <div class="swiper-button-prev"></div> 86 <div class="swiper-button-next"></div> 87 88 <div class="swiper-pagination"></div> 89 </div> 90 </div> 91 92 <table> 93 <tr> 94 <th>住所</th> 95 <td>住所</td> 96 </tr> 97 98 <tr> 99 <th>電話番号</th> 100 <td>111-1111-1111</td> 101 </tr> 102 103 <tr> 104 <th>営業時間</th> 105 <td>11:30~</td> 106 </tr> 107 108 <tr> 109 <th>価格</th> 110 <td>500円</td> 111 </tr> 112 113 <tr> 114 <th>コメント</th> 115 <td>ああああああ</td> 116 </tr> 117 </table> 118 </section> 119
css
1~~~特にビジュアルに影響がないため下記は不要かもしれません~~~ 2html * { 3 -webkit-box-sizing: border-box; 4 box-sizing: border-box; 5}
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。