swiper在vue中使用
1,进入项目根目录,安装swipercnpm run swiper --save2,在需要的vue页面,导入swiper样式和jsimport Swiper from 'swiper'import 'swiper/dist/css/swiper.css';3,循环出轮播或者写死都行,以循环出为例html部分<div class=&amp
·
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'
}
]
}
},
完成
更多推荐
已为社区贡献2条内容
所有评论(0)