SOURCE

const mySwiper = new Swiper('.swiper', {
    direction: 'vertical',
    autoplay: true,
    loop: true,
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
    slidesPerView: 4, // 每页显示的条数
    grid: {
        fill: 'column',
        rows: 1,
    },
    scrollbar: {
        el: '.swiper-scrollbar',
        draggable: true, // 为true时滚动条可拖动，false时无法拖动
    },
})

<div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">slider1</div>
      <div class="swiper-slide">slider2</div>
      <div class="swiper-slide">slider3</div>
      <div class="swiper-slide">slider4</div>
      <div class="swiper-slide">slider5</div>
      <div class="swiper-slide">slider6</div>
      <div class="swiper-slide">slider7</div>
      <div class="swiper-slide">slider8</div>
      <div class="swiper-slide">slider9</div>
      <div class="swiper-slide">slider10</div>
    </div>
    <div class="swiper-scrollbar"></div>
  </div>

.swiper {
    width: 300px;
    height: 500px;
    margin-top: 70px;
}
.swiper-slide:nth-child(2n-1) {
    background-color: blueviolet;
}
.swiper-slide:nth-child(2n) {
    background-color: coral;
}
.swiper-scrollbar {
    cursor: pointer
}