前言

coverflow封面轮播图主要常用在一些音乐播放网站，或者视频网站中，主要是通过放大正在轮播的图片，从而实现捕获用户的眼球，减少其他未轮播到的轮播图视觉上的干扰，本文我们就通过 swiper库来简单实现一下。

一、最终效果

先来看一下我们的最终效果：

二、swiper库的引入

在 swiper中内置了四种轮播的样式，可设置为’slide’（普通切换、默认）,“fade”（淡入）“cube”（方块）“coverflow”（3d流）“flip”（3d翻转）。然后 coverflow和我们要实现的效果相似，可以通过设置了 coverflow效果，然后再来调整。

coverflow效果参数，可选值：（属性名，coverflowEffect，启用版本4.0.0）

参数名	默认	描述
rotate	50	slide做3d旋转时Y轴的旋转角度
stretch	0	每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比
depth	100	slide的位置深度。值越大z轴距离越远，看起来越小。
modifier	1	depth和rotate和stretch的倍率，相当于depthmodifier、rotatemodifier、stretch*modifier，值越大这三个参数的效果越明显。
slideShadows	true	是否开启slide阴影

<!-- swiper库版本 4.5.1 -->
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.1/css/swiper.css" rel="stylesheet" />
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>

三、代码复现

1. html主体

<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide one">Slide 1</div><div class="swiper-slide two">Slide 2</div><div class="swiper-slide three">Slide 3</div></div><!-- 分页器 --><div class="swiper-pagination"></div>
</div>

2. css样式

body,
div {margin: 0;padding: 0;
}
div.swiper-container {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 800px;height: 800px;border-radius: 5px;
}
div.swiper-slide {display: flex;justify-content: center;align-items: center;color: #ffffff;font-size: 60px;
}
div.one {background-color: #34495e;
}
div.two {background-color: #d35400;
}
div.three {background-color: #16a085;
}

3. js脚本

var mySwiper = new Swiper('.swiper-container', {autoplay: true,loop: true,pagination: {el: '.swiper-pagination',},centeredSlides: true, // 居中显示正在展示的slide，默认是居左对齐。slidesPerView: 2, // 一次显示多少个 slide，这里因为 coverflowEffect子参数设定，设置为3的时候是不能够充满父盒子的，所以要比真正显示的盒子少才行。effect: 'coverflow', // 轮播效果coverflowEffect: {// coverflow 效果细节调整rotate: 0,stretch: 50,depth: 350,},
});

总结

总结；以上便是今天实现的 coverflow效果，关于参数这块可以根据项目实际需要进行调整。

最后，如果您有更好的方法，欢迎在留言区中分享；或者实际操作中遇到什么问题均可留言或者私信我，感谢您的观看！
官方文档：Swiper

切换效果：coverflow 封面轮播图相关推荐

原生JS实现 ‘Tab栏切换’，‘手风琴’，‘轮播图’效果
1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
html轮播台袋效果,css3百叶窗轮播图效果
标题 #Con{width:900px; /*宽度*/ height:500px;/*高度*/ background:#9933FF;/*背景颜色*/ position:relative;} #con ...
JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
【python教程入门学习】用pyecharts绘制带动画效果的“时间轮播图
今天我们要分享的是一个数据可视化的案例. 在讲述本文之前,为了满足大家的好奇心,我们先来看看最终做出来的效果呈现. 不管学习什么技术,官网是最好的老师.对于pyecharts绘图库,知道了他的绘图原理 ...
用JS实现图片切换、定时器、轮播图
一. 图片切换实现功能: 当点击"下一页"时,跳转到下一张图片: 当点击"上一页"时,跳转到上一张照片: 显示当前页数/总页数,如:2/6. <!DOC ...
Vue实战篇二十七：实现走马灯效果的商品轮播图
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
html图片轮播怎么写,用js和CSS写图片切换效果（轮播图）
用js和CSS写图片切换效果(轮播图). ** 学习前提** 了解CSS伪类元素,css3过度效果对js拥有基础的了解. 清楚图片切换原理. CSS3轮播图 body{ background:#cc ...
vue列表左右箭头滑动_vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）...
1.效果图如下 2.vue代码如下 indicator-position="none" :autoplay="false"> > {{items.b ...
bootstrap轮播图原点变为方块_JS实现无缝切换轮播图(自动+手动)
一.背景说起轮播图,大家应该都不陌生,各大购物网站和面试题里都能看到它的身影. 实现上也并不困难,而写这篇文章是想整理一下自己心血来潮写的代码,以及实现过程中的一些思考,大家也可以顺便复习巩固一下. ...

切换效果：coverflow 封面轮播图

文章目录

前言