Swiper

矢印とドットを外に出す

矢印とドットのdivタグを「.swiper」の外に出す。　「.swiper」と同階層にする。

HTML
CSS
                  
.swiper__content {
  position: relative;
  padding: 0;
  width: min(100%, 700px);
  margin: 0 auto 50px;
}
.swiper {
  display: flex;
}
.swiper-slide img {
  width: 100%;
  height: auto;
}
.swiper-pagination {
  bottom: -25px !important;
}
.swiper-button-prev {
  left: -30px;
}
.swiper-button-next {
  right: -30px;
}
script
                  
    window.onload = function () {
      const swiper = new Swiper(".swiper", {
        spaceBetween: 20, //スライド間に20pxの余白を設定
        slidesPerView: 1,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //ページネーションのクリックを有効にする
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    }