swiper实现影院轮播效果

首先看效果：

主要是使用在移动端，用的是Vue框架：

<swiper :options="swiperOption" touch-action: none>
  <swiper-slide v-for="(item, i) in films" :key="i">
    <div style="text-align:center" @click="changemovie(i)">
      <van-image width="90" height="130" :src="item.poster" />
    </div>
  </swiper-slide>
</swiper>


//用的是vue脚手架，子组件里面的data必须是函数，return一个对象
  data() {
    return {
      swiperOption: {
        effect: "coverflow",			//切换效果
        slidesPerView: 3,				//设置slider容器能够同时显示的slides数量(carousel模式)
        centeredSlides: true,			//设定为true时，active slide会居中，而不是默认状态下的居左
        coverflowEffect: {				//效果对象，详细设置切换效果
          rotate: 0,					//slide做3d旋转时Y轴的旋转角度
          stretch: -11,					//每个slide之间的拉伸值,可以控制slide之间的距离，越大slide靠得越紧
          depth: 150,					//slide的位置深度。值越大z轴距离越远，看起来越小
          modifier: 2,					//相当于depth*modifier、rotate*modifier、stretch*modifier
          slideShadows: false			//是否开启slide阴影
        },
        slideToClickedSlide: true,		//设置为true则点击slide会过渡到这个slide。	
        initialSlide: 0					//设定初始化时slide的索引
      },
    };
  },

值得注意的是这些属性运行在swiper4以上版本

以上就是轮播效果过的实现，主要是修改效果对象里面的属性，来实现自己想要的效果。

也可以了解一下这个大佬的文章，有很多干货