这种效果用swiper怎么实现？

Question

如图显示这种效果用swiper.js怎么实现啊?或者是自己写怎么实现？
需求：可以自动向上滚动轮播，首尾相接，也可以手动向上或者向下滑动来进行滚动，有没有做过这种效果的朋友啊。

Answer 1

这是文档: https://www.swiper.com.cn/api/parameters/21.html

代码示例:

从Swiper7开始，容器默认类名由'.swiper-container'变更为'.swiper'。

<script> 
  var mySwiper = new Swiper('.swiper', {
    direction: 'vertical',
  })
</script>

Answer 2

你设置垂直方向不就行了direction: 'vertical',，官网也有例子吧

<template>
  <div class="swiper-container">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(item,index) in list" :key="index">
        <img :src="item.img" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
  name: 'Swiper',
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      list: [
        { img: 'https://xxx.jpg' },
        { img: 'https://xxx.jpg' },
        { img: 'https://xxx.jpg' }
      ],
      swiperOption: {
        direction: 'vertical', // 垂直方向
        loop: true, // 循环播放
        autoplay: true, // 自动播放
        pagination: {
          el: '.swiper-pagination'
        }
      }
    }
  }
}
</script>

<style scoped>
.swiper-container {
  width: 100%;
  height: 300px;
}
</style>

Answer 3

<div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

<script>
   var swiper = new Swiper(".swiper", {
      direction: "vertical",
      slidesPerView: 1,
      spaceBetween: 30,
      autoplay: {
        disableOnInteraction: false,
      },
      speed: 1000,
      loop: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });

  </script>