実現したいこと
Swiperのスライダーを作っています。カードを自動スクロールで流している（自分でスクロールも可）デザインです。
リロードしてスライダーをみてみると最初の画面は綺麗に並んでいるのですが、1つ目のスライドが自動で動いたところで左側にカード0.5枚ほどのに謎の余白ができてしまいます。カードが動いていくと綺麗に並ぶようになるのですが、どうしても気になってなおしたいです。
汚い字ですみませんがご参照ください。
わかる方おられましたらお力添えのほど宜しくお願いいたします。
前提
こちらを真似して作りました。
https://b-risk.jp/wp/wp-content/themes/brisk/sample/entry/20220425/#demo03
こちらを元にして作るとうまくいったのですが
条件を変えると余白が出てしまいました。
発生している問題・エラーメッセージ
コンソールエラーなどは出ていません。
該当のソースコード
HTML
1 <!-- Slider main container --> 2 <div class="swiper"> 3 <!-- Additional required wrapper --> 4 <div class="swiper-wrapper element"> 5 <!-- Slides --> 6 <article class="swiper-slide"> 7 <figure><img src="img/digital-marketing-1433427_1280-1.png" alt=""></figure> 8 <div class="swiper-slide__textbox"> 9 <h3 class="swiper-slide__textbox-heading"> 10 株式会社サンプル様採用サイトのコーディングを行いました！</h3> 11 <!-- /.swiper-slide__textbox-heading --> 12 <p class="swiper-slide__textbox-desk">採用技術：jQuery,Bootstrap4 <br> 13 実装期間：2週間<br> 担当コーダー：石井</p><!-- /.swiper-slide__textbox-desk --> 14 </div><!-- /.swiper-slide__textbox --> 15 </article> 16<!-- これが８個です--> 17 18 19 </div> 20
SCSS
1.swiper {2 3 overflow: hidden;4}5 6.swiper-wrapper {7 display: flex;8 box-sizing: content-box;9}10 11 .swiper-slide {12 &:not(.swiper-slide-visible) {13 .slide {14 pointer-events: none;15 opacity: .3;16 }17 }18 }19 20 21.swiper-slide {22 width: 322px;23 height: 407px;24 border: 1px solid #DDDDDD;25 border-radius: 8px;26 overflow: hidden;27 flex-shrink: 0;28 display: block;29 30 figure {31 img {32 height: 210px;33 display: block;34 object-fit: cover;35 width: 100%;36 }37 }38 39 &__textbox {40 padding: 18px;41 }42 43 &__textbox-heading {44 font-size: 16px;45 font-weight: bold;46 line-height: 1.5;47 color: $c_text;48 margin-bottom: 30px;49 }50 51 &__textbox-desk {52 font-size: 14px;53 line-height: 1.5;54 font-weight: bold;55 color: $c_text;56 }57}
jQuery
12 const mySwiper = new Swiper('.swiper', { 3 slidesPerView: 1.5, 4 spaceBetween: 26, 5 loop: true, 6 loopAdditionalSlides: 1, 7 speed: 1000, 8 autoplay: { 9 delay: 4000, 10 disableOnInteraction: false, 11 }, 12 grabCursor: true, 13 centeredSlides: true, 14 breakpoints: { 15 600: { 16 slidesPerView: 'auto', 17 spaceBetween: 56, 18 }, 19 20 }, 21 });
試したこと
ネットで調べたのですが、調べ方が悪かったせいか出てきませんでした。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
0 コメント