用vue实现一个轮播图slider

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

  
  

你可能感兴趣的:(用vue实现一个轮播图slider)