平武建站

怎么使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果

这篇文章主要介绍怎么使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联不只是一家网站建设的网络公司；我们对营销、技术、服务都有自己独特见解，公司采取“创意+综合+营销”一体化的方式为您提供更专业的服务！我们经历的每一步也许不一定是最完美的，但每一步都有值得深思的意义。我们珍视每一份信任，关注我们的网站制作、网站设计质量和服务品质，在得到用户满意的同时，也能得到同行业的专业认可，能够为行业创新发展助力。未来将继续专注于技术创新，服务升级，满足企业一站式营销型网站需求，让再小的品牌网站设计也能产生价值！

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

旋转叠加

怎么使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果

平移

怎么使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果

前段时间做Hybrid App，UI设计湿要求某一个页面的展示要实现滑动轮播效果，选中的内容卡片居中显示，上一个内容卡片和下一个内容以小一倍的大小显示在选中的卡片后头，而且要高斯模糊等等。。最骚的是滑动特效要是一个个旋转叠加。（摔！

当时用的是vue-cli-3 + ant-design-vue实现的页面，发现ant-design-vue里头有现成的Carousel组件可用，由于排期比较急，先暂时用这个实现了第一版，没有特效没有其他花里胡哨的展示。验收完第一版后，发现ant-design-vue的坑是真的多啊。。Carousel在移动端也是十分的不流畅。总是就是体验特别的不好。最后一气之下，全部样式自己写，全部组件自己封装，将ant-design-vue完完整整移出了项目。

轮播图这块想到了Swiper这一好东西，现在已经有了vue版，但是是没有专门的vue版文档的，可以找到的项目也比较少。无奈之下啃了Swiper4文档，一顿猛操作，摸到了一点点门道。把需求实现了是也。简单整理了一下，写了个简单的小demo，记录一下，如果可以帮到你那是最好啦~

1.首先引入Vue-Awesome-Swiper

引入Vue-Awesome-Swiper有两种方式，一种是全局引入，一种是组件内引入。如果你的项目里只有一个地方要用到这玩意，那就在用到的那个页面引入就行，如果多个地方要用到，那就全局引入吧。

全局引入：

// main.js
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)

组件内引入：

// xxx.vue

2.在页面使用


  
 

js部分

旋转叠加

平移

配置参数那里，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实现旋转叠加轮播效果&平移轮播效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


标题名称：怎么使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
分享地址：http://pwwzsj.com/article/gcoohp.html

其他资讯