自己用的轮播图、:踩了好多坑
<template>
<div>
<swiper :options="swiperOption" ref="mySwiper" class="my-swiper">
<!-- 这部分放你要渲染的那些内容 -->
<swiper-slide v-for="item in items">
<img :src="item" alt="">
</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>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import pic1 from '../assets/swiper/sky.jpg'
import pic2 from '../assets/swiper/ocean.jpg'
import pic3 from '../assets/swiper/land.jpg'
export default {
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
//是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true
notNextTick: true,
// 分页按钮
pagination: {
el: '.swiper-pagination'
},
//前后循环
loop:true,
//这个属性加入使得 轮播图触摸之后可以重新播放
autoplay:{
disableOnInteraction: false,
},
// 上下翻页
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 速度
speed:1000,
slidesPerView: 'auto',
centeredSlides: true,
paginationClickable: true,
spaceBetween: 30,
onSlideChangeEnd: swiper => {
//这个位置放swiper的回调方法
this.page = swiper.realIndex+1;
this.index = swiper.realIndex;
}
},
items:[pic1,pic2,pic3]
}
},
// //定义这个sweiper对象
// computed: {
//
// swiper() {
// return this.$refs.mySwiper.swiper;
// }
// },
// mounted () {
// //这边就可以使用swiper这个对象去使用swiper官网中的那些方法
// this.swiper.slideTo(0, 0, false);
// }
}
</script>
<style scoped>
.my-swiper{
width: 600px;
height: 250px;
margin: 0 auto;
}
.my-swiper img{
width: 100%;
height: 100%;
}
</style>