-slide v-for="(item, i) in films" :key="i"> //用的是vue脚手架,子组件里面的d。swiper实现影院轮播效果。" />

swiper实现影院轮播效果

【swiper实现影院轮播效果】首先看效果:

主要是使用在移动端,用的是Vue框架:

:options="swiperOption" touch-action: none> -slide v-for="(item, i) in films" :key="i">
//用的是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以上版本
以上就是轮播效果过的实现,主要是修改效果对象里面的属性,来实现自己想要的效果。
也可以了解一下这个大佬的文章,有很多干货

    推荐阅读