用他人的组件，还不如自己有能力写一个轻量级的符合自己项目的轮播图组件，哎，但是js忘了好多，不会写啊，等以后有能力再写。
使用GitHub上最火热的一个轮播图组件：vue-awesome-swiper
（1）有npm的下载方式：
我用的是yarn下载的：
yarn add vue-awesome-swiper@2.6.7
下载到项目后，在yarn.lock中多了该项：
在pageage.json中多了该项：
（2）在文件的全局使用：
在项目的main.js引入轮播图组件（官网中有引入的说明）
在组件中的使用，官网中也很多demo
官网中有对版本的更新，有详细的说明，以及组件中各个属性的用法：https://www.swiper.com.cn/api/index2.html
如果有数据就显示数据内容，（显示传入的数据时，先展示第一个图片），第一个页面就会先展示，如果没有数据，就不显示轮播图。
用v-if ，值是通过计算属性计算
写轮播组件的思路： 1、确定传入的参数：轮播图的数据（图片地址，跳转href，图片ID，标题等基础数据）、轮询时间 2、写好轮播图的基本样式，父组件传入参数，动态加载进
前言 本来如果只是想做个轮播图的话不太需要这么麻烦的构建webpack项目，但是我的目的不是只做个轮播图这么简单，主要是想用webpack搭建一个vue项目，然后在里面实现了
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQw
在制作这个组件之前，笔者google了不少关于轮播的文章，发现实现一个轮播的思路虽然各有不同，但是大的逻辑其实差不多，本文主要依据慕课网上[焦点轮播图特效][Link 1]这节
1. 首页文件：index.html <!DOCTYPE html> <html> <head> <meta charset="u
1. 用他人的组件，还不如自己有能力写一个轻量级的符合自己项目的轮播图组件，哎，但是js忘了好多，不会写啊，等以后有能力再写。 2. 使用GitHub上最火热的一个轮播图组件
1、先看效果： ![1069950-20180417205419472-1688516521.png][] 熟悉的图片轮播，只要是个网站，百分之90以上会有个图片轮
Notices: 这是我一个项目中的一个子组件，要展示的数据、图片地址等的都在父组件data中。所以后面的讲述都是基于从父组件获取的参数进行处理。（如需将这个SlideShow
这个用到定时器来实现； 思路：使用`<ul><li>`来放图片，按照我们的要求来排版；溢出的隐藏，还需要用到最主要的一个属性；就是动画属性：`animation @ke
淩亂°似流年
迈不过友情╰
今天药忘吃喽~
爱被打了一巴掌
野性酷女
灰太狼
小灰灰
还没有评论，来说两句吧...