Swiper

縦方向のスライダー

・オプション「direction: “vertical”,」で縦方向を設定する

・CSSで矢印の位置と向きを変更する

CSS
                  
.swiper__content {
  width: min(100%, 640px);
  margin: 0 auto 50px;
}
.swiper {
  aspect-ratio: 32 / 21;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}
.swiper-slide img {
  width: 100%;
  height: auto;
}

/* 矢印を上下に置く */
.swiper-button-prev, .swiper-button-next {
  margin: 0;
  right: 20px;
  left: initial;
  transform: rotate(90deg); /* 角度を変更 */
}
.swiper-button-prev {
  top: 0;
}
.swiper-button-next {
  top: initial;
  bottom: 0;
}
script
                  
window.onload = function() {
    const swiper = new Swiper(".swiper", {
        direction: "vertical", //縦方向にスライド

        spaceBetween: 20,
        slidesPerView: 1,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
}