配置参数那里，init我是设置的false，我是想在项目挂载完成后，获取到了接口数据之后，再用 this.swiper.init() 去初始化轮播组件的，然后我把激活项的索引存在了vuex里头，这样每次从其他页面返回这个页面，就可以用 this.swiper.slideTo(this.activeItemIndex) 去控制我要定位到哪一个内容卡片先。
3.样式初始化方面
swiper-content { width: 100%; height: 100%; position: relative; overflow: hidden; margin: 0 auto; padding: 50px 0; .show-swiper { width: 100%; height: 100%; top: 0; left: 0; .swiper-slide { width: 500px; // 表示所有属性都有动作效果，过度时间为0.4s，以慢速开始和结束的过渡效果 transition: all .4s cubic-bezier(.4, 0, .2, 1); .swiper-item { width: 100%; height: 500px; background: rgb(140, 172, 134); border-radius: 6px; color: orangered; font-size: 24px; line-height: 1.5; border: 1px solid orangered; } } } }
因为 slidesPerView: 'auto' ，所以swiper-slide我们要给他一个初始化的宽度，以便他自动计算容器宽度，然后这里我设置了动画的效果 transition: all .4s cubic-bezier(.4, 0, .2, 1); 可以根据自己的需要作出改动
大概就是这些内容，是不是很简单呢。我会把源码地址贴出来，有需要的话就自行clone参考吧~，项目里我使用的是vue-cli3，可以自行调整。
总结
以上所述是小编给大家介绍的使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: