vue使⽤swiper实现中间⼤两边⼩的轮播图效果
项⽬中使⽤的vue，刚好有需求要实现轮播图，突出显⽰当前图⽚，两边展⽰其他图⽚；通过查各种资料，实现了，故在此记录下来
下⾯我们来看下实现步骤：
js实现轮播图最简代码第⼀步：⾸先在项⽬index.html中引⼊swiper的css⽂件- swiper.min.css
第⼆部：写⼊dom结构
<div class="swiper-container">
<div class="swiper-wrapper">
<div
v-for="(item, i) in pictures"
:key="i"
class="swiper-slide"
>
<!-- 具体内容 -->
<img
:src="item.advertiseImages"
alt="商品图⽚"
>
</div>
</div>
</div>
第三步：在项⽬中使⽤npm安装swiper模块
npm install swiper --save-dev
JS中⽂⽹ - 前端进阶资源教程www.javascriptC⼀个致⼒于帮助开发者⽤代码改变世界为使命的平台，每天都可以在这⾥到技术世界的头条内容
第四步：在vue⽂件中引⼊，并初始化swiper；先引⼊swiper
import Swiper from "swiper";
注意初始化需要放⼊mounted钩⼦中哦
import Swiper from "swiper";
export default {
data() {
return {
}
},
mounted() {
var mySwiper = new Swiper(".swiper-container", {
direction: "horizontal",
loop: false,
slidesPerView: "auto",
centeredSlides: true,
spaceBetween: 20,
observer: true,
observeParents: true
});
}
}
如果你的项⽬中，图⽚是从后台接⼝获取，那么上⾯的初始化可能会出问题，这个时候我们采取另外的⽅式初始化swiper
import Swiper from "swiper";
export default {
data() {
return {
mySwiper: null
}
},
methods: {
getdata() {
promise.then(res => {
this.pictures = res.images || [];
this.$nextTick(() => {
this.initSwiper();
});
});
},
initSwiper() {
direction: "horizontal",
loop: false,
slidesPerView: "auto",
centeredSlides: true,
spaceBetween: 20,
observer: true,
observeParents: true
});
}
}
}
把swiper的初始化放⼊vue的nextTick中执⾏，就解决掉问题啦
第五步：如果想获取当前滚动到哪⼀张图⽚怎么办呢
使⽤activeIndex属性就可以获取到当前图⽚的索引啦。那么我们这个功能就完成啦
总结
以上所述是⼩编给⼤家介绍的vue使⽤swiper实现中间⼤两边⼩的轮播图效果，希望对⼤家有所帮助，如果⼤家有任何疑问欢迎给我留⾔，⼩编会及时回复⼤家的！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。