这篇文章主要为大家详细介绍了vue.js轮播图组件使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
之前用jQuery写过轮播组件，用的jquery动画实现的图片滑动效果。这个组件的滑动特效是原生js搭配vue的数据绑定实现的，不依赖其他库，虽然可以再vue.js中引入swiper,但是引入类库的最大的缺点就是冗余代码太多，所以还是自己写一个比较好，简单扼要。（ps:组件的宽高设置还有有点小bug，子组件中需要改为用js动态修改container的宽高，另外可能还有其他地方有不合理之处，欢迎各位批评指正）
github地址：[email protected]:cainiao222/vueslider-components.git
父组件代码：
<div> </div>
子组件代码：
<div class="box"> <div class="container"> <div class="slider-wrap"> <div class='img'> </div></div><div class="bottom"> <ul class="pointContainer"> <li></li></ul></div><div class="click pre"><</div><div class="click next">></div></div></div> *{ margin: 0; list-style: none; /*height: 0;*/ } .box{ position: relative; } .container{ width: 460px; height: 250px; margin: 0 auto; border: 1px solid #3bb4f2; overflow: hidden; left: 0; top: 0; position: abso<strong style="color:transparent">来源gaodai#ma#com搞@代~码$网</strong>lute; } .slider-wrap{ /*width: 2760px;*/ /*height: 250px;*/ position: absolute; /*left: -460px;*/ /*overflow: hidden;*/ top: 0; } .transition{ transition: 0.5s; } .img{ width: 460px; height: 250px; float: left; display: inline; } img{ width: 460px; height: 250px; /*float: left;*/ } .click{ width: 20px; background-color: rgba(255,255,255,.3); color: aliceblue; font-weight: bold; position: absolute; height: 40px; line-height: 40px; margin-top: -20px; top: 50%; cursor: pointer; } .pre{ left: 0; } .next{ right: 0; } .bottom{ position: absolute; bottom: 0; width: 100%; height: 20px; text-align: center; } .pointContainer{ height: 20px; } .point{ display: inline-block; border: 5px solid #eeeeee; border-radius: 5px; line-height: 0; margin-right: 3px; } .active{ border: 5px solid #42b983; }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是vue.js轮播图组件使用方法详解的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue.js轮播图组件使用方法详解
转载请注明原文链接：vue.js轮播图组件使用方法详解
