swiper实现影院轮播效果

最新推荐文章于 2024-02-19 17:17:37 发布

蒙悦纳

最新推荐文章于 2024-02-19 17:17:37 发布

阅读量554

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_40375518/article/details/108117321

版权

HTML5 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

首先看效果：
在这里插入图片描述

主要是使用在移动端，用的是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的索引
      },
    };
  },