如何在Vue2中使用slide轮播图组件

今天就跟大家聊聊有关如何在Vue2中使用slide轮播图组件，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

专注于为中小企业提供成都网站制作、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业朔州免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了超过千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

话不多说直接上源码

轮播图应用页面 \components\public\home.vue

轮播图组件页面 src\components\public\carousel.vue 

 .slide{position: relative;margin: 0;padding: 0; overflow: hidden;width: 100%; height:450px;}
 .slide li{list-style: none;position: absolute;width: 100%; height:450px;}
 .slide li img{width: 100%; height:450px;cursor:pointer}
 .slide li .title{position: absolute; left:0; bottom: 0; padding: 10px 20px; width: 100%; background: rgba(0,0,0,.35);color: #fff;font-size: larger; text-align: center}
 .slideDot{position: absolute;z-index: 999; bottom: 60px;right:15px; }
 .slideDot span{display: inline-block; width: 30px; height: 7px; background:rgba(255,255,255,.65); margin-left: 5px;}
 .slideDot span.active{background:rgba(255,255,255,1);}
 .up,.next{position: absolute; left:0; top: 50%; margin-top: -32px; cursor: pointer; width:64px;height: 64px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
 }
 .up{background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABSklEQVRoQ9Xa220CMRCF4XMqIB0kdJASSCfpIDWlAzqAElIC6SBUMNFIywsCtB7PjX336v/k3YexTBQ+IvIC4AvAN8mTJYWWRR5rROQdwAGAIk4kt5b3lgCu4rX7l+TbUwBuxJ8B7Ej+tAd4xys47ROKiE8DRMWnACLjwwHR8aGAjPgwQFZ8CCAz3h3QHe8KqIh4A1TFuwAq46cB1fFTgA7xZkCXeBOgU/wwoFv8EKBj/GpA1/gRgJ4e7JaZdWqGtcy9j9asGilFRM9sXpcX/QH4sA7hVQA9wzkC2HRDrNoBjV7+g3aI1YCuiCFAR8QwoBvCBOiEMAO6IKYAHRDTgGqEC6AS4QaoQrgCKhDugGxECCATEQbIQoQCMhDhgGhECiASkQaIQqQCIhDpgDuI57orcQNxJqmXPoafkh34VIqIXvD4BLC3HtP8A6pfGkB3vbyXAAAAAElFTkSuQmCC");}
 .next{left: auto;right:0;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABOElEQVRoQ9Xa0W0CQQyEYU9JqShQAXSSEgIdUAIlQAd04milezgdOiHZ4/GGN5C8/N/u060Olvy4+8nMngDuyaVC4whNLUPufjazn+XrEcAls15klgkY/y9HpACj2N3Hrn+vdk+KSAO6ERRAJ4IG6EJQAR0IOkCNKAEoEWUAFaIUoECUA6oREkAlQgaoQkgBFQg5gI1oATARbQAWohXAQLQDsogpABnENIAoYirADuILwGPvxmJGwK+ZHVbB/wfg7tv4K4A15u0gpjmBSPzQTAGIxk8ByMS3A7LxrQBGfBuAFd8CYMbLAex4KaAiXgaoipcAKuPLAdXxpQBFfBlAFV8CUMbTAep4KqAjngboiqcAOuPTgM27EmO9j8+we7cL0d9Tj5QbgDw+fQLLPc54Y+UF4BbdxczcH9Le8DFn39OvAAAAAElFTkSuQmCC");}
 .up:hover{background-color: rgba(0,0,0,.3)}
 .next:hover{background-color: rgba(0,0,0,.3)}
 /*进入过渡生效时的状态*/
 .slide-enter-active{
  transform:translateX(0);
  transition: all 1s ease;
 }
 /*进入开始状态*/
 .slide-enter{
  transform:translateX(-100%);
 }
 /*离开过渡生效时的状态*/
 .slide-leave-active{
  transform:translateX(100%);
  transition: all 1s ease;
 }
 /*离开过渡的开始状态*/
 .slide-leave{
  transform:translateX(0);
 }
 /*进入过渡生效时的状态*/
 .slideBack-enter-active{
  transform:translateX(0);
  transition: all 1s ease;
 }
 /*进入开始状态*/
 .slideBack-enter{
  transform:translateX(100%);
 }
 /*离开过渡生效时的状态*/
 .slideBack-leave-active{
  transform:translateX(-100%);
  transition: all 1s ease;
 }
 /*离开过渡的开始状态*/
 .slideBack-leave{
  transform:translateX(0);
 }

看完上述内容，你们对如何在Vue2中使用slide轮播图组件有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。

文章名称：如何在Vue2中使用slide轮播图组件
转载源于：http://bjjierui.cn/article/gocosd.html