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

一：首先进入项目目录中安装

install [email protected] --save

二.使用

全局挂载：

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

Vue.use(VueAwesomeSwiper, /* { default global options } */)

组件挂载

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

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

页面展示如下

三：在使用过程中遇到的问题

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的资料请关注脚本之家其它相关文章！