実現したいこと
Swiperを実装したときに横スクロールバーが出てしまいます。
検証でディスプレイボタンで見ると、
スワイパーのカードが全て表示になっていて横いっぱいに広がってしまいます。
該当のソースコード
SASS
1.works {2 3 .section-ttl {4 &+* {5 margin-top: 70px;6 }7 }8}9 10.work-inner {11 width: 100%;12 padding-top: 55px;13 padding-bottom: 90px;14}15 16.swiper-wrapper {17 display: flex;18}19 20.swiper-slide {21 width: 322px;22 height: 407px;23 border: 1px solid #DDDDDD;24 border-radius: 8px;25 overflow: hidden;26 flex-shrink: 0;27 28 figure {29 img {30 height: 210px;31 display: block;32 object-fit: cover;33 width: 100%;34 }35 }36 37 &__textbox {38 padding: 18px;39 }40 41 &__textbox-heading {42 font-size: 16px;43 font-weight: bold;44 line-height: 1.5;45 color: $c_text;46 margin-bottom: 30px;47 }48 49 &__textbox-desk {50 font-size: 14px;51 line-height: 1.5;52 font-weight: bold;53 color: $c_text;54 }55}
HTML
1 <div class="swiper"> 2 <!-- Additional required wrapper --> 3 <div class="swiper-wrapper element"> 4 <!-- Slides --> 5 <article class="swiper-slide"> 6 <figure><img src="img/digital-marketing-1433427_1280-1.png" alt=""></figure> 7 <div class="swiper-slide__textbox"> 8 <h3 class="swiper-slide__textbox-heading"> 9 株式会社サンプル様採用サイトのコーディングを行いました！</h3> 10 <!-- /.swiper-slide__textbox-heading --> 11 <p class="swiper-slide__textbox-desk">採用技術：jQuery,Bootstrap4 <br> 12 実装期間：2週間<br> 担当コーダー：石井</p><!-- /.swiper-slide__textbox-desk --> 13 </div><!-- /.swiper-slide__textbox --> 14 </article> 15 <article class="swiper-slide"> 16 <figure><img src="img/dylan-gillis-KdeqA3aTnBY-unsplash.png" alt=""></figure> 17 <div class="swiper-slide__textbox"> 18 <h3 class="swiper-slide__textbox-heading"> 19 株式会社サンプル様採用サイトのコーディングを行いました！</h3> 20 <!-- /.swiper-slide__textbox-heading --> 21 <p class="swiper-slide__textbox-desk">採用技術：jQuery,Bootstrap4 <br> 22 実装期間：6週間<br> 担当コーダー：石井</p><!-- /.swiper-slide__textbox-desk --> 23 </div><!-- /.swiper-slide__textbox --> 24 </article> 25 <article class="swiper-slide" element> 26 <figure><img src="img/arnel-hasanovic-MNd-Rka1o0Q-unsplash.png" alt=""></figure> 27 <div class="swiper-slide__textbox"> 28 <h3 class="swiper-slide__textbox-heading"> 29 株式会社サンプル様採用サイトのコーディングを行いました！</h3> 30 <!-- /.swiper-slide__textbox-heading --> 31 <p class="swiper-slide__textbox-desk">採用技術：jQuery,Bootstrap4 <br> 32 実装期間：4週間<br> 担当コーダー：石井</p><!-- /.swiper-slide__textbox-desk --> 33 </div><!-- /.swiper-slide__textbox --> 34 </article> 35 <article class="swiper-slide"> 36 <figure><img src="img/digital-marketing-1433427_1280-1.png" alt=""></figure> 37 <div class="swiper-slide__textbox"> 38 <h3 class="swiper-slide__textbox-heading"> 39 株式会社サンプル様採用サイトのコーディングを行いました！</h3> 40 <!-- /.swiper-slide__textbox-heading --> 41 <p class="swiper-slide__textbox-desk">採用技術：jQuery,Bootstrap4 <br> 42 実装期間：2週間<br> 担当コーダー：石井</p><!-- /.swiper-slide__textbox-desk --> 43 </div><!-- /.swiper-slide__textbox --> 44 </article> 45 <article class="swiper-slide"> 46 <figure><img src="img/dylan-gillis-KdeqA3aTnBY-unsplash.png" alt=""></figure> 47 <div class="swiper-slide__textbox"> 48 <h3 class="swiper-slide__textbox-heading"> 49 株式会社サンプル様採用サイトのコーディングを行いました！</h3> 50 <!-- /.swiper-slide__textbox-heading --> 51 <p class="swiper-slide__textbox-desk">採用技術：jQuery,Bootstrap4 <br> 52 実装期間：6週間<br> 担当コーダー：石井</p><!-- /.swiper-slide__textbox-desk --> 53 </div><!-- /.swiper-slide__textbox --> 54 </article> 55 <article class="swiper-slide"> 56 <figure><img src="img/arnel-hasanovic-MNd-Rka1o0Q-unsplash.png" alt=""></figure> 57 <div class="swiper-slide__textbox"> 58 <h3 class="swiper-slide__textbox-heading"> 59 株式会社サンプル様採用サイトのコーディングを行いました！</h3> 60 <!-- /.swiper-slide__textbox-heading --> 61 <p class="swiper-slide__textbox-desk">採用技術：jQuery,Bootstrap4 <br> 62 実装期間：4週間<br> 担当コーダー：石井</p><!-- /.swiper-slide__textbox-desk --> 63 </div><!-- /.swiper-slide__textbox --> 64 </article> 65 <article class="swiper-slide"> 66 <figure><img src="img/digital-marketing-1433427_1280-1.png" alt=""></figure> 67 <div class="swiper-slide__textbox"> 68 <h3 class="swiper-slide__textbox-heading"> 69 株式会社サンプル様採用サイトのコーディングを行いました！</h3> 70 <!-- /.swiper-slide__textbox-heading --> 71 <p class="swiper-slide__textbox-desk">採用技術：jQuery,Bootstrap4 <br> 72 実装期間：2週間<br> 担当コーダー：石井</p><!-- /.swiper-slide__textbox-desk --> 73 </div><!-- /.swiper-slide__textbox --> 74 </article> 75 <article class="swiper-slide"> 76 <figure><img src="img/dylan-gillis-KdeqA3aTnBY-unsplash.png" alt=""></figure> 77 <div class="swiper-slide__textbox"> 78 <h3 class="swiper-slide__textbox-heading"> 79 株式会社サンプル様採用サイトのコーディングを行いました！</h3> 80 <!-- /.swiper-slide__textbox-heading --> 81 <p class="swiper-slide__textbox-desk">採用技術：jQuery,Bootstrap4 <br> 82 実装期間：6週間<br> 担当コーダー：石井</p><!-- /.swiper-slide__textbox-desk --> 83 </div><!-- /.swiper-slide__textbox --> 84 </article> 85 86 </div> 87 88 </div><!-- /.swiper --> 89 </div><!-- /.section-inner --> 90 </section><!-- /.works -->
jQuery
1//スワイパー works 2//-------------------------------------------- 3const swiper = new Swiper('.swiper', { 4 loop: true, 5 loopAdditionalSlides: 1, 6 autoplay: { 7 delay: 4000, 8 disableOnInteraction: false, 9 }, 10 speed: 800, 11 grabCursor: true, 12 centeredSlides: true, 13 centeredSlidesBounds: true, 14 spaceBetween: 56, 15 initialSlide: 1, 16 breakpoints: { 17 0: { 18 slidesPerView: 1.2, 19 }, 20 700: { 21 slidesPerView: 'auto', 22 }, 23 } 24});
試したこと
ネットで調べて
initialSlide: 1,centeredSlidesBounds: true,
などを追加してみましたが無理でした。
CSSに
overflow: hidden;やwidth: 100vw;など追加してみましたが
解決に至らないです。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
0 コメント