swiper在vue中使用

版权声明：企业站，小游戏制作 https://blog.csdn.net/qq947289507/article/details/83446235

1，进入项目根目录，安装swiper

cnpm install swiper --save

2，在需要的vue页面，导入swiper样式和js

import Swiper from 'swiper' 
import 'swiper/dist/css/swiper.css';

3，循环出轮播或者写死都行，以循环出为例
html部分

<div class="swiper-container">
	<div class="swiper-wrapper">
		<div v-for='el in arrItem' class="swiper-slide">
			<img class="img" :src="el.imgUrl">
		</div>
	</div>
	<!-- 如果需要分页器 -->
	<div class="swiper-pagination"></div>
</div>

js部分

mounted:function(){
	new Swiper('.swiper-container', {
		loop: true, // 循环模式选项
		// 如果需要分页器
		pagination: {
			el: '.swiper-pagination',
		},
	})
},
data(){
	return {
			arrItem:[
					{
							name:'swiperSlide5',
							imgUrl:'http://pic.58pic.com/58pic/13/60/16/64b58PICXEK_1024.jpg'
					},
					{
							name:'swiperSlide1',
							imgUrl:'http://image.qmango.com/hotelimg/dl1210/109490/109.jpeg'
					},
					{
							name:'swiperSlide51',
							imgUrl:'http://image.qmango.com/hotelimg/dl1210/125708/181.jpeg'
					},
					{
							name:'swiperSlide1111115',
							imgUrl:'http://image.qmango.com/hotelimg/dl1210/119297/793.jpeg'
					}
			]
	}
},

完成