Swiperで、３枚目の画像が表示されなくなってしまう
Q&A
Closed
解決したいこと
Swiperのloop:trueを使用し、６枚の画像を連続で表示させたいと思っております。しかし実装してみると、３枚目の画像がなぜか表示されなくなってしまいます。（下記画像の青い丸で囲った部分です）
コードは下記のように記載しております。
HTML
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="<?php echo get_template_directory_uri(); ?>/img/index_img_insta_03.png"></div>
<div class="swiper-slide"><img src="<?php echo get_template_directory_uri(); ?>/img/index_img_insta_04.png"></div>
<div class="swiper-slide"><img src="<?php echo get_template_directory_uri(); ?>/img/index_img_insta_05.png"></div>
<div class="swiper-slide"><img src="<?php echo get_template_directory_uri(); ?>/img/index_img_insta_06.png"></div>
<div class="swiper-slide"><img src="<?php echo get_template_directory_uri(); ?>/img/index_img_insta_07.png"></div>
<div class="swiper-slide"><img src="<?php echo get_template_directory_uri(); ?>/img/index_img_insta_08.png"></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
CSS
.swiper {
width: 100%;
height: 400px;
}
img {
max-width: auto !important;
width: auto !important;
height: 400px;
object-fit: cover;
}
js
$(function () {
const swiper = new Swiper('.swiper', {
slidesPerView:3.5,
loop:true,
centeredSlides:true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
});
自分で試したこと
loop:true,を消して、 centeredSlidesBounds: true,を代わりに設定。そうすることで最初と最後のスライダが空白にならないようにしようと試みました。
しかし今度は、 centeredSlides:true,が効かなくなったのか？最初のスライドがセンターにならなくなってしまいまいました。加えて、slidesPerView:3.5,の両端の見切れ表示も無効になっているようです。（下記画像参照）
コードは下記のように変更しました。
（html、cssの変更はありません）
js
$(function () {
const swiper = new Swiper('.swiper', {
slidesPerView:3.5,
centeredSlides:true,
centeredSlidesBounds: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
});
参考にしたサイト
コーディング初心者のため、分かりづらい上に初歩的な質問となってしまい申し訳ありません。
どなたか、ご教示いただけますと大変ありがたく存じます。
どうぞよろしくお願いいたします。m(__)m
0
