swiperの永続ループができない です。
解決したいこと
「Wordpress内で swiper を 永続ループさせたい」
よろしくお願いいたします。
swiperは稼働しているのですが、
<div class="swiper-slide">1枚目の画像</div>
<div class="swiper-slide">2枚目の画像</div>
<div class="swiper-slide">3枚目の画像</div>
と書いた場合、3枚目の画像まで表示されると右が空白になり一旦画像の連鎖が終わり、ある程度流れるとその3枚目の次（右側）に1枚目の画像が現れて左にスライドし、次に2枚目の画像が現れて左にスライドし、を繰り返すようになります。その現れた画像の右側は空白で・・・、 という具合に、次々に画像が現れては来るのですが、一本の帯のように永続ループにはなりません。
画像の数を、2倍から5倍まで貼り付けてみたのですが結局、6枚なり15枚なりがスライドして終わったら右は空白になってしまい、1巡したら終わってその次に1枚ずつ次の画像が現れて左にスライドしてゆき右の空白は有ったままです。
下の画像のように、はじめは上のように画面全体を使って左にスライドしてくれているのですが、設定枚数が終わることになると、下のように、右側は空白になり、見えている右の画像がセンターあたりで現れて左にスライドしてまた右に新たな画像が現れて、の繰り返しです。
発生している問題・エラー
エラーメッセージは出ていません
該当するソースコード
function my_script_init()
//スワイパー読み込み
wp_enqueue_script('swiper', '//unpkg.com/swiper@11/swiper-bundle.min.js', "", "1.0.1", true);
wp_enqueue_style('swiper', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');
//スワイパーここまで
wp_enqueue_style('style-css', get_template_directory_uri() . '/css/style.css', array(), '1.0.1');
wp_enqueue_script('main-js', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0.1', true);
}
add_action('wp_enqueue_scripts', 'my_script_init');
$(function () {
//その他色々
const swiper2 = new Swiper(".swiper2", {
direction: 'horizontal',
loop: true,
effect: "slide",
speed: 3000,
allowTouchMove: false,
spaceBetween: 34,
autoplay: {
delay: 0,
},
});
<div class="slider">
<div class="slider__inner">
<div class="slider__slider">
<div class="swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="<?php echo esc_url(get_theme_file_uri("/images/slide01.jpg")); ?>" class="slide01-img" alt="">
</div>
<div class="swiper-slide">
<img src="<?php echo esc_url(get_theme_file_uri("/images/slide02.jpg")); ?>" class="slide02-img" alt="">
</div>
<div class="swiper-slide">
<img src="<?php echo esc_url(get_theme_file_uri("/images/slide03.jpg")); ?>" class="slide03-img" alt="">
</div>
<div class="swiper-slide">
<img src="<?php echo esc_url(get_theme_file_uri("/images/slide01.jpg")); ?>" class="slide01-img" alt="">
</div>
<div class="swiper-slide">
<img src="<?php echo esc_url(get_theme_file_uri("/images/slide02.jpg")); ?>" class="slide02-img" alt="">
</div>
<div class="swiper-slide">
<img src="<?php echo esc_url(get_theme_file_uri("/images/slide03.jpg")); ?>" class="slide03-img" alt="">
</div>
</div>
</div>
</div>
</div>
.slider {
width: 100%;
height: 440px;
margin-top: 101px;
position: relative;
}
.slider__inner {
display: flex;
position: relative;
width: 100%;
height: inherit;
object-fit: cover;
overflow: hidden;
}
.slider__slider,
.swiper2-slide img {
aspect-ratio: 506/393;
width: 506px;
height: 393px;
object-fit: cover;
}
.swiper-slide img {
height: 100%;
width: 100%;
object-fit: cover;
}
.slide01-img {
height: 393px;
width: 506px;
object-fit: cover;
}
.slide02-img {
height: 393px;
width: 506px;
object-fit: cover;
}
.slide03-img {
height: 393px;
width: 506px;
object-fit: cover;
}
.swiper {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
}
.swiper-wrapper {
transition-timing-function: linear;
}
自分で試したこと
swiperのカスタマイズ用オプションを.jsに順番に加筆してみたのですがどれを入れ込んでもうまくいきませんでした。（参照：https://junpei-sugiyama.com/swiper-option/)
他、様々なswiper解説記事を巡ったのですが、今のところ解決に至りません状況です。
尚、slidesPerView: , を入れてみたらどうかとのアドバイスをいただきましたところ、
このオプションを記述しない、または slidesPerView: 1,にしますと画像の大きさは希望通りになりますが、
slidesPerView: ３,にしますと下のように画像の大きさが小さくなってしまい、
slidesPerView: ４,のように数字を大きくしますと画像の大きさが、より小さくなってしまう、という現象が起こります。
補足として
コードにおいて swiper2 となっているのは、1ページ内に3つのswiperを設置しているためです。
swiper1はfadeの効果をループさせ、swiper3はループを止めてページネーションボタンを押すことで左右に画像が横移動しそれぞれ画像を押下することで詳細（投稿）ページに移行する仕組みにしています。
swiper1とswiper3は正常に稼働しております。
画像がそれぞれ上下に凸凹しているのは、偶数番画像にmargin-topを指定しているデザイン指定によるものです。
