Swiperで作成したスライドの表示がおかしい
Q&A
Closed
解決したいこと
Swiperでメインのスライドとサムネイル表示用のスライドを作成して
横に並べて表示をしたいのですが、表示がおかしくなります。
１．JSでサムネイル用のスライドに「spaceBetween」のオプションを使用してスライド間の余白を作ろうとすると.swiper-slideの高さが自動でどんどん伸びていく
２．サムネイルの下に不要な余白が出来てしまう。ウィンドウの横幅を広げたり狭くしたりすると、自動でサイズが調整されない
以上の問題が発生しています。
JSはあまり詳しくない為、解決方法があれば教えてくださると助かります。
よろしくお願いいたします。
１の症状は以下から確認できます。
http://
２の症状は以下から確認できます。
http://
スライドの完成イメージは以下のような感じです（左がメイン、右をクリックすると左の画像が変わる）
SwiperのJSとCSSは以下のCDNを使用しています。
https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js
bootstrap5のグリッド機能を使用しています。
該当するソースコード
<div class="photoSwiper_container container"><!-- メインのスライド -->
<div class="row">
<div class="swiper main swiper_main_room">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://placehold.jp/ccffcc/ffffff/900x615.png"></div>
<div class="swiper-slide"><img src="https://placehold.jp/ffcccc/ffffff/900x615.png"></div>
<div class="swiper-slide"><img src="https://placehold.jp/ccccff/ffffff/900x615.png"></div>
</div>
</div>
<div class="swiper thumbnail swiper_thumbnail_room"><!-- サムネイルのスライド -->
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://placehold.jp/ccffcc/ffffff/900x615.png"></div>
<div class="swiper-slide"><img src="https://placehold.jp/ffcccc/ffffff/900x615.png"></div>
<div class="swiper-slide"><img src="https://placehold.jp/ccccff/ffffff/900x615.png"></div>
</div>
</div>
</div>
</div>
//共通の設定（サムネイル）
var commonSettings_thumbnail = {
slidesPerView: 3,
direction: 'vertical',
spaceBetween: 2,
};
//共通の設定（メイン）
var commonSettings_main = {
loop: false,
allowTouchMove: true,
slidesPerView: 1,
};
//トップページ用ROOM
var swiper_thumbnail_room = new Swiper('.swiper_thumbnail_room', {
...commonSettings_thumbnail,
});
var swiper_main_room = new Swiper('.swiper_main_room', {
thumbs: { swiper: swiper_thumbnail_room, },
...commonSettings_main,
});
.photoSwiper_container{
background-color: cyan;
.main{
width: 70%;
}
.thumbnail{
width: 15%;
}
}
0
