轮播图组件之vue组件vuedataloading

前提：虽然 swiper样式效果相当的全面 但是太重是我不想要的 所以才找了下面的组件进行使用 如果小伙伴们有更好用的组件 希望能不吝分享。宗旨是 学海无涯 相互分享 共同进步 

1. vue-agile 官网地址https://github.com/lukaszflorczak/vue-agile

  demo源码编辑地址 https://codepen.io/collection/AdRzJW/

  项目需求如下左图， 而官方事例中是下右图

     直接修改源码显然不合适 而暴漏出来的属性设置也没有该模块的内容 所以我在此通过修改样式的方法 从右图变成左图  首先说下大概思路：

a:首先将缩略的轮播通过旋转放置到上图中的左图所示

b:其次位置通过绝对定位固定设置

c:整体旋转后会出现图片内容旋转的问题 这时候就需要将缩略滚动中的图片都旋转对应的度数即可 上图我是旋转了90deg 所以对应的图片要旋转-90deg即可

e:上述的三个步骤已经将样式完全修改好了 还有个需求就是 去除默认的循环和点击缩略图进行滑动的效果

f:去除默认循环 通过开放的设置 infinite:false 即可达到目的

g:去除点击滑动的效果 暂时没找到对应的设置属性 所以我还是很霸道的通过控制样式来设置 在index.css文件中 直接设置

.thumbnails .agile__track{

transform: translate(0)!important;

}

即可 看来样式真的是相当的666呢 自此就完成了上述的内容

2.vueperslides 官网地址https://github.com/antoniandre/vueper-slides 用到这个主要是看起来效果不错 而且比较常见吧 

api https://antoniandre.github.io/vueper-slides/#vueper-slides--api

现在发现组件的api简直是指路明灯呀 太好用了 原作者表述的也是十分详细 在此我就不多添加任何语言进行二次描述了 旨在分享 造福小伙伴咯 有意见大家一起讨论解决咯