Swiper

初期状態で右側だけコンテンツ幅からはみ出る

「.swiper」に「overflow: visible;」を指定

横スクロールを作らないために親要素に「overflow: hidden;」を指定

CSS

                  
/* 親要素に「overflow: hidden;」を指定 */
.main {
  overflow: hidden;
}

.swiper__content {
  width: min(100%, 1000px);
  margin: 0 auto;
  margin-block: 50px;
}
.swiper {
  overflow: visible;
}
.swiper-slide {
  width: min(100%, 245px);
  aspect-ratio: 4：3;
}
.swiper-slide img {
  width: 100%;
  height: auto;
}

script

                  
    window.onload = function () {
      const swiper = new Swiper(".swiper", {
        spaceBetween: 10,
        // slidesPerView: 'auto',
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },

        //スライドの表示枚数
        slidesPerView: 2,
        breakpoints: {
          // 769px以上の場合
          769: {
            slidesPerView: 3,
          },
          1000: {
            slidesPerView: 4,
          },
        },

      });
    }