注意,官方并没有vue2的使用文档,以下展示的是swiper直接使用,
下载5版本,Vue2对这个版本支持好
cnpm i swiper@5
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
```JS
<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
export default {
name: "HomeView",
data() {
return {
swiperShow: false,
};
},
mounted() {
this.swiperShow = true;
console.log(this.$data);
},
updated() {
new Swiper(".swiper-container", {
direction: "horizontal", // 垂直切换选项
grabCursor: true, //手掌
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// 如果需要滚动条
scrollbar: {
el: ".swiper-scrollbar",
},
autoplay: true,
});
},
};
</script>
<style scoped>
.swiper-container {
width: 976px;
height: 550px;
}
.swiper-pagination /deep/ .swiper-pagination-bullet {
width: 10px;
height: 10px;
}
</style>