现有需求要求实现竖直方向的同时显示3个item的轮播效果，若依VUE（前后端分离）版本使用的是Element UI，框架中的carousel组件只能实现简单的轮播效果，并且不够灵活，所以我们引入swiper。

1、安装swiper依赖

npm install swiper --save

安装成功后可以发现在page.json中找到swiper及其版本：我安装的版本号为5.4.5。

2、在main.js中引入样式

import 'swiper/css/swiper.min.css';

3、在需要swiper的页面引入并使用

<div class="swiper-container my-swiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide" v-for="index in 5" :key="index">
			<div class="my-slide">这是第{{index}}个slide</div>
		</div>
	</div>
	<div class="swiper-pagination"></div>
</div>

.my-swiper{
	height:300px;
    width: 300px;
    margin: 100px auto;
    box-shadow: 0px 0px 3px 1px rgba(215, 215, 215, 0.35);
}
.my-slide{
	border-bottom: 1px solid #EFEFEF;
  	line-height:100px;
    text-align: center;
}

import Swiper from 'swiper';

mounted(){
	var newSwiper = new Swiper('.my-swiper', {
	  initialSlide:0,
	  loop: true, // 循环模式选项
	  direction: 'vertical', //竖直方向
	  slidesPerView: 3,
	  autoplay:true,
	  observer:true, //修改swiper自己或子元素时，自动初始化swiper
	  pagination: {
	    el: '.swiper-pagination',
	    clickable: true,
	  }
	})
}

4、实现效果

可能是录制软件的问题，有点卡顿，实际效果很流畅哈。