Swiper
固定サイズにする:右側のみチラ見させる
CSS
.swiper {
padding-right: 15%;
}
・padding設定を入れてあげるだけです。
・今回は「15%」にしてますが画像サイズ・デザインによって変更。
script
window.onload = function () {
const swiper = new Swiper(".swiper", {
loop: true, //スライドの無限ループ
speed: 1000, // スライド切り替え速度
slidesPerView: 2, //表示枚数
spaceBetween: 10,// スライド間に10pxの余白を設定
loopAdditionalSlides: 1, //複製するスライド数を指定(ループ時のクローン数)
breakpoints: {
// 768px以上では
769: {
slidesPerView: 3,
},
}
});
}
オプション
loopAdditionalSlides: 1,
※「loop: true,」のときのみ使えるオプション
・「0」だとループが滑らかに繋がらないことがあるため「1」以上がお勧め
・見切れるスワイパー用に複製するスライドを追加することです(ループ時のクローン数)
デフォルト:0,





