VUE 脚手架项目中轮播图的实现

VUE项目中轮播图的实现 vue-awesome-swiper

——依赖插件vue-awesome-swiper，PC端应用

一款基于 Swiper4、适用于 Vue 的轮播组件，支持服务端渲染和单页应用。官方GitHub参考链接

功能实现：

• 自动轮播
• 无限循环
• 鼠标进入停止轮播
• 鼠标移出开始轮播

注：初学vue，小白鼠一枚，有错误请指点，勿喷 勿喷， 手动比心 ❤

---

安装

方法一：CDN 安装

方法二： npm安装 *

使用 vue-cli 时推荐

npm install vue-awesome-swiper --save

注：其他方法请 参考官网

---

main.js文件中

引入文件，全局配置

方法一：局部引入：

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

方法二：全局引入：

    import Vue from 'vue'
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'
 
    Vue.use(VueAwesomeSwiper, /* { default global options } */)

---

轮播组件中 "carousel.vue"

使用方法：

视图

script

carousel.vue 实例代码

参考网页
更多配置选项请参考 swiper官网
更多vue-awesome-swiper 使用技巧请参考vue-awesome-swiper——Github