【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以上版本
以上就是轮播效果过的实现,主要是修改效果对象里面的属性,来实现自己想要的效果。
也可以了解一下这个大佬的文章,有很多干货
推荐阅读
- JavaScript|JavaScript之DOM增删改查(重点)
- html5|各行业工资单出炉 IT类连续多年霸占“榜首”位置
- Shopify如何选品中文教程 – 评估所选品的产品和利基市场的准则上
- Shopify如何选品中文教程 – 评估所选品的产品和利基市场的准则下
- webpack配置|基于webpack3.x的多页面配置(HtmlWebpackPlugin学习篇二 ——动态配置)
- Shopify如何选品中文教程 – 最后一课
- &#x(unicode编码后的汉字)JS转换方法
- 微信小程序页面性能|如何解决微信小程序加载慢的问题()
- WEB前端|用HTML5canvas绘制一个圆环形的进度表示
- (15)HTML5-分辨率检测