如何在VUE中使用vue-awesome-swiper

install vue-awesome-swiper@2.6.7 --save

全局挂载：

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, )

组件挂载

// require styles
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
 components: {
 swiper,
 swiperSlide
 }
}

新建一个.vue文件，按照以下代码模式

@import "../assets/public/css/bottom.css";
@import "../assets/css/index/my.css";
#mySwiper >>> .swiper-pagination-bullet {
 background: #000000;
}
#mySwiper >>> .swiper-pagination-bullet-active {
 background: #ff0000;
}

页面展示如下

1.触摸后再次自动轮播问题，添加以下属性就可以再次轮播

autoplayDisableOnInteraction:false

2.样式穿透问题，修改圆点的样式问题

  解决方案是给swiper容器添加上ID，然后再在后面添加>>>,这样就可以解决了

#mySwiper >>> .swiper-pagination-bullet {
 background: #000000;
}
#mySwiper >>> .swiper-pagination-bullet-active {
 background: #ff0000;
}

3.解决如果只有一张图片不轮播问题

以上就是如何在VUE中使用vue-awesome-swiper的详细内容，更多关于VUE中使用vue-awesome-swiper的资料请关注考高分网其它相关文章！