轮播图组件之 vue组件vue-data-loading

Z时代
2024-01-10
分类：综合

vue

前提：虽然 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呢自此就完成了上述的内容