若依引入swiper / VUE引入swiper

妖狐艹你老母 2022-10-07 08:56 392阅读 0赞

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

#### 1、安装swiper依赖 ####

npm install swiper --save

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

![swiper依赖][swiper]

#### 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、实现效果 ####

![实现效果][2021061711284684.gif_pic_center]  
可能是录制软件的问题，有点卡顿，实际效果很流畅哈。

[swiper]: /images/20221005/a8e9b107ed9b4cdcba3b5a85a3fa6e64.png
[2021061711284684.gif_pic_center]: /images/20221005/c14d6b9e16d346cfbb1043c8fcf45ea6.png