用vue实现一个轮播图slider

轮播图是前端很常用的一个网页特效,几乎所有的网站或多或少都会用到这个特效.轮播图的插件也有很多,用jQuery写起来也不难.这里分享一个使用vue的轮播图效果.可以点击连接查看效果vue实现轮播图
　以上的效果主要模仿自小米商城,里面的图片也来源于此.轮播的效果是淡入淡出效果,采用的是vue的过渡transition,结合css3动画实现.
　这里可以查看源代码,源码采用vue-cli构造,主要内容在slide组件中,,可以直接复制slide组件的内容,在要使用的地方,注册slide组件,HTML结构里面直接写上slide标签即可.可自定义轮播图的大小,轮播速度,传vue的props属性,对应inv,styleObject中的宽高.

  <slide :slides="slides" :inv="inv" :style="styleObject"></slide>
  <script>
  import slide from '@/components/slide.vue'
  export default{
    components: {slide},
    data () {
      return {
        slides: [
          {
            src: 'http://i3.mifile.cn/a4/xmad_14913974588712_tsRvc.jpg'
          },
          {
            src: 'http://i3.mifile.cn/a4/xmad_14915894814419_zNYsr.jpg'
          },
          {
            src: 'http://i3.mifile.cn/a4/xmad_14913784864515_mkpqH.jpg'
          },
          {
            src: 'http://i3.mifile.cn/a4/xmad_14908694250786_fObqa.jpg'
          },
          {
            src: 'http://i3.mifile.cn/a4/xmad_14913755624659_gRtNH.jpg'
          }
        ],
        inv: 2000,
        styleObject: {
          width: '1226px',
          height: '460px'
        }
      }
    }
  }
</script>