javascript实现图片轮播_Vue实现图片轮播

在Vue项目中会经常需要实现图片轮播的效果，可以使用vue-awesome-swiper插件快速实现。具体步骤如下：

1. 安装vue-awesome-swiper（安装稳定版本2.6.7）

npm install vue-awesome-swiper@2.6.7 --save

2.引入vue-awesome-swiper：一般通过main.js进行全局引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

3.使用vue-awesome-swiper插件

ps: loop:true表示图片可以来回循环显示

插件默认显示的圆点为蓝色，若希望自定义颜色，需要使用上图红框的写法，其中 >>> 该句代码表示样式穿透，使用效果不局限于该页面

vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>，穿透scoped。