安装(必须携带版本,最新版本有问题)
npm install vue-awesome-swiper@3 --save-dev
//或
npm i vue-awesome-swiper@3 -D
cnpm i vue-awesome-swiper@3 -D
封装一个组件去使用他,不需要全局引入
swiper为轮播图容器UI
swiper-slide为轮播的内容
img中的图片进行替换就能正确显示,注意图片的格式大小,不然会出现问题
更多问题请访问https://www.swiper.com.cn/api/index.html
<template>
<div>
<swiper :options="swiperOption" ref="mySwiper">
<!-- <swiper-slide>
<a href="">
<img src="../../../assets/banner/banner3.jpg" alt="">
</a>
</swiper-slide> -->
<swiper-slide>
<a href="">
<img src="../../../assets/banner/banner1.png" alt="" width="100%" height="322px">
</a>
</swiper-slide>
<swiper-slide>
<a href="">
<img src="../../../assets/banner/banner2.jpg" alt="" width="100%" height="322px">
</a>
</swiper-slide>
<swiper-slide>
<a href="">
<img src="../../../assets/banner/banner3.jpg" alt="" width="100%" height="322px">
</a>
</swiper-slide>
<swiper-slide>
<a href="">
<img src="../../../assets/banner/banner4.jpg" alt="" width="100%" height="322px">
</a>
</swiper-slide>
<swiper-slide>
<a href="">
<img src="../../../assets/banner/banner5.jpg" alt="" width="100%" height="322px">
</a>
</swiper-slide>
<swiper-slide>
<a href="">
<img src="../../../assets/banner/banner6.jpg" alt="" width="100%" height="322px">
</a>
</swiper-slide>
// 分页器
<!-- <div class="swiper-pagination" slot="pagination"></div> -->
// 前进后退按钮
<!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
<!-- <div class="swiper-button-next" slot="button-next"></div> -->
</swiper>
</div>
</template>
<script>
//轮播图vue插件
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false
},
// 显示分页
pagination: {
el: ".swiper-pagination",
clickable: true //允许分页点击跳转
},
// 设置点击箭头
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
}
};
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
mounted() {
// current swiper instance
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
console.log("this is current swiper instance object", this.swiper);
// this.swiper.slideTo(3, 1000, false);
}
}
</script>
<style lang="scss" scoped>
</style>