先上效果图
刚开始对着swiper官网自己摸索,引入swiper依赖启动,当然是直接报错,然后百度各种文章,是版本问题导致报错,后来用vue-awesome-swiper来做这个轮播。我用的是3.1.3的vue-awesome-swiper
第一步
npm install vue-awesome-swiper@3 --save-dev
然后就是最重要的一点 引入文件 这一步了
第二步
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
引入css文件这一步,建议顺着node_modules插件包的路径,一不小心就是引入错误
第三步
使用vue-awesome-swiper是要用组件方式引入
components: { swiper, swiperSlide },
使用
<swiper class="mySwiper" :options="swiperOption" ref="mySwiper">
<!-- 添加的图片 -->
<swiper-slide >
<img class="swiper-slide" src="../../../assets/visualizationFrame/111.jpg" />
</swiper-slide>
<swiper-slide >
<img class="swiper-slide" src="../../../assets/visualizationFrame/111.jpg" />
</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>
export default {
components: { swiper, swiperSlide },
data() {
return {
swiperOption: {
grabCursor: true,
//可见图片张数
slidesPerView: 2,
// 默认选中中间一张
centeredSlides: true,
//无限循环
loop: true,
//小圆点(我此处没使用,列出供参考)
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// pagination: '.swiper-pagination',
//自动轮播
autoplay: {
delay: 5000,
stopOnLastSlide: false,
},
//上下按钮点击轮播效果
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// notNextTick: true,
slideToClickedSlide: true,
on: {
click: function () {
//需要注意的是:this 指向的是 swpier 实例,而不是当前的 vue, 因此借助 vm,来调用 methods 里的方法
const realIndex = this.realIndex
// 当前活动块的索引,与activeIndex不同的是,在loop模式下不会将 复制的块 的数量计算在内
//点击可以手动切换轮播图
vm.$refs.mySwiper.swiper.slideTo(realIndex, 300, false)
},
},
// direction: 'horizontal',
// spaceBetween: 4, // 在slide之间设置距离 也可以是百分比 10%
// centeredSlides: true, // 默认选中中间一张
// observer: true, // 修改swiper自己或子元素时,自动初始化swiper
// observeParents: true, // 修改swiper的父元素时,自动初始化swiper
},
}
},
mouted() {
},
created() {
vm = this
},
methods: {},
}
总结
不能瞎抄