上記ページの下のほうにSwiperを用いてスライダーのコンテンツがあるのですが、
CMSに挿入すると崩れてしまいます。
「Case study」のところはCMSのところに挿入していないので崩れていませんが、
「Blog」のところは崩れてしまい、フッターより下で表示されていて挙動もおかしくなってしまいます。
■前提・実現したいこと
Case studyのところみたいなスライダーにしたい
https://gyazo.com/9e0d7457f3a697741a51aacae895e6e9
上記キャプチャのようなかんじです。
■発生している問題
BlogのところをCMSに挿入するとフッターをこえて1番下に表示されて崩れる。
CMSはOwletというCMSです。
下記がソースです。
html
1<section class="blog"><div class="blog__inner"><div class="top-casestudy-mid-box"> 2 <h3 class="top-ttl-01">Blog</h3> 3 <a href="#" class="casestudy-more-link">More</a> 4</div> 5 6<div class="swiper-custom-parent"> 7 <div> 8 <div class="swiper-container2 swiper-container-horizontal"> 9<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-1320px, 0px, 0px);"> 10<div class="swiper-slide swiper-4column__block swiper-slide-next" data-swiper-slide-index="0" style="width: 290px; margin-right: 40px;"> 11 <div class="swiper-4column__image"><img src="/_img/ja/article/13/main_image/290_200_1_ffffff/"></div> 12 <div class="swiper-4column__body"> 13 <p class="swiper-4column__date">2018.05.23</p> 14 <p class="swiper-4column__headline"><a href="/blog/knowledge/20180523-13/">知識ノウハウ知識ノウハウ</a></p> 15 </div> 16 </div> 17</div><div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-1320px, 0px, 0px);"> 18<div class="swiper-slide swiper-4column__block" data-swiper-slide-index="1" style="width: 290px; margin-right: 40px;"> 19 <div class="swiper-4column__image"><img src="/_img/ja/article/12/main_image/290_200_1_ffffff/"></div> 20 <div class="swiper-4column__body"> 21 <p class="swiper-4column__date">2018.05.23</p> 22 <p class="swiper-4column__headline"><a href="/blog/operating/20180523-12/">あああああああああああ</a></p> 23 </div> 24 </div> 25</div><div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-1320px, 0px, 0px);"> 26<div class="swiper-slide swiper-4column__block" data-swiper-slide-index="2" style="width: 290px; margin-right: 40px;"> 27 <div class="swiper-4column__image"><img src="/_img/ja/article/11/main_image/290_200_1_ffffff/"></div> 28 <div class="swiper-4column__body"> 29 <p class="swiper-4column__date">2018.05.23</p> 30 <p class="swiper-4column__headline"><a href="/blog/others/20180523-11/">その他テスト</a></p> 31 </div> 32 </div> 33</div><div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-1320px, 0px, 0px);"> 34<div class="swiper-slide swiper-4column__block swiper-slide-duplicate-prev" data-swiper-slide-index="3" style="width: 290px; margin-right: 40px;"> 35 <div class="swiper-4column__image"><img src="/_img/ja/article/10/main_image/290_200_1_ffffff/"></div> 36 <div class="swiper-4column__body"> 37 <p class="swiper-4column__date">2018.05.23</p> 38 <p class="swiper-4column__headline"><a href="/blog/knowledge/20180523-10/">あああああああ</a></p> 39 </div> 40 </div> 41</div><div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-1320px, 0px, 0px);"> 42<div class="swiper-slide swiper-4column__block swiper-slide-active" data-swiper-slide-index="4" style="width: 290px; margin-right: 40px;"> 43 <div class="swiper-4column__image"><img src="/_img/ja/article/3/main_image/290_200_1_ffffff/"></div> 44 <div class="swiper-4column__body"> 45 <p class="swiper-4column__date">2018.05.10</p> 46 <p class="swiper-4column__headline"><a href="/blog/marketing/20180510-3/">【マーケティング】ブログタイトルが入ります。</a></p> 47 </div> 48 </div> 49</div><div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-1320px, 0px, 0px);"><div class="swiper-slide swiper-4column__block swiper-slide-duplicate" data-swiper-slide-index="2" style="width: 290px; margin-right: 40px;"> 50 <div class="swiper-4column__image"><img src="/_img/ja/article/11/main_image/290_200_1_ffffff/"></div> 51 <div class="swiper-4column__body"> 52 <p class="swiper-4column__date">2018.05.23</p> 53 <p class="swiper-4column__headline"><a href="/blog/others/20180523-11/">その他テスト</a></p> 54 </div> 55 </div><div class="swiper-slide swiper-4column__block swiper-slide-duplicate" data-swiper-slide-index="3" style="width: 290px; margin-right: 40px;"> 56 <div class="swiper-4column__image"><img src="/_img/ja/article/10/main_image/290_200_1_ffffff/"></div> 57 <div class="swiper-4column__body"> 58 <p class="swiper-4column__date">2018.05.23</p> 59 <p class="swiper-4column__headline"><a href="/blog/knowledge/20180523-10/">あああああああ</a></p> 60 </div> 61 </div> 62</div> 63<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div> 64</div> 65<!-- If we need navigation buttons --> 66<div class="swiper-button-prev2" tabindex="0" role="button" aria-label="Previous slide"></div> 67<div class="swiper-button-next2" tabindex="0" role="button" aria-label="Next slide"></div> 68</div></div> 69</section>
css
1.swiper-custom-parent{ 2 max-width:1480px; 3 width:100%; 4 margin-left:auto; 5 margin-right:auto; 6 position: relative; 7 /*margin-bottom:60px;*/ 8} 9.swiper-container { 10 overflow: hidden; 11 list-style: none; 12 padding: 0; 13 /* Fix of Webkit flickering */ 14 z-index: 1; 15 max-width:1280px; 16 width:100%; 17 margin: 0 auto; 18} 19.swiper-container2 { 20 overflow: hidden; 21 list-style: none; 22 padding: 0; 23 /* Fix of Webkit flickering */ 24 z-index: 1; 25 max-width:1280px; 26 width:100%; 27 margin: 0 auto; 28} 29.swiper-container-no-flexbox .swiper-slide { 30 float: left; 31} 32.swiper-container-vertical > .swiper-wrapper { 33 -webkit-box-orient: vertical; 34 -webkit-box-direction: normal; 35 -webkit-flex-direction: column; 36 -ms-flex-direction: column; 37 flex-direction: column; 38} 39.swiper-wrapper { 40 position: relative; 41 width:100%; 42 height: 100%; 43 z-index: 1; 44 display: -webkit-box; 45 display: -webkit-flex; 46 display: -ms-flexbox; 47 display: flex; 48 -webkit-transition-property: -webkit-transform; 49 transition-property: -webkit-transform; 50 -o-transition-property: transform; 51 transition-property: transform; 52 transition-property: transform, -webkit-transform; 53 -webkit-box-sizing: content-box; 54 box-sizing: content-box; 55 -webkit-box-pack: justify; 56 -ms-flex-pack: justify; 57 justify-content: space-between; 58} 59.p-document-list__item{ 60 border: 1px solid #dcdddd; 61 padding: 20px; 62 max-width:400px; 63 background-color: #fff; 64} 65@media screen and (min-width: 768px) { 66.swiper-4column__block{ 67 max-width:290px; 68} 69} 70.swiper-4column__image{ 71 text-align:center; 72} 73.swiper-4column__body{ 74 background-color:#fff; 75 padding:15px; 76} 77.swiper-4column__date{ 78 color:#969696; 79 font-size:13px; 80 line-height:1; 81 margin-bottom:15px; 82} 83.swiper-4column__headline{ 84 font-weight:bold; 85 font-size:16px; 86} 87.swiper-container__headline{ 88 font-weight:bold; 89 font-size:1.125rem; 90 margin-bottom:10px; 91} 92.swiper-container__category{ 93 margin-bottom:5px; 94 color:#41a9c6; 95} 96.swiper-container-android .swiper-slide, 97.swiper-wrapper { 98 -webkit-transform: translate3d(0px, 0, 0); 99 transform: translate3d(0px, 0, 0); 100} 101.swiper-container-multirow > .swiper-wrapper { 102 -webkit-flex-wrap: wrap; 103 -ms-flex-wrap: wrap; 104 flex-wrap: wrap; 105} 106.swiper-container-free-mode > .swiper-wrapper { 107 -webkit-transition-timing-function: ease-out; 108 -o-transition-timing-function: ease-out; 109 transition-timing-function: ease-out; 110 margin: 0 auto; 111} 112.swiper-slide { 113 -webkit-flex-shrink: 0; 114 -ms-flex-negative: 0; 115 flex-shrink: 0; 116 width:100%; 117 height: 100%; 118 position: relative; 119 -webkit-transition-property: -webkit-transform; 120 transition-property: -webkit-transform; 121 -o-transition-property: transform; 122 transition-property: transform; 123 transition-property: transform, -webkit-transform; 124}
■問題が発生した環境
firefox chrome最新
お忙しいとは存じますが、どなたか解決方法をご教授いただければ幸いです。
回答1件
あなたの回答
tips
プレビュー