今天我们练习一个用swiper实现的3D轮播图效果，这个效果需要将swiper文件引入到HTML中，然后再结合CSS就实现了以下效果：
我把今天练习项目中的素材文件打包了，大家根据需要自行下载获取，素材下载地址：https://pan.baidu.com/s/1UCB63NVDZpDWtSI43ayt8w?pwd=knm4
提取码: knm4
接下来，我们直接查看代码。
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>【每日一练】28—用Swiper实现的3D滑动效果</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="swiper.min.css">
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="imgBx">
<img src="img1.jpg">
</div>
<div class="details">
<h3>杨小爱<br><span>Web前端开发-网页设计</span></h3>
</div>
</div>
<div class="swiper-slide">
<div class="imgBx">
<img src="img1.jpg">
</div>
<div class="details">
<h3>杨小爱<br><span>Web前端开发-网页设计</span></h3>
</div>
</div>
<div class="swiper-slide">
<div class="imgBx">
<img src="img1.jpg">
</div>
<div class="details">
<h3>杨小爱<br><span>Web前端开发-网页设计</span></h3>
</div>
</div>
<div class="swiper-slide">
<div class="imgBx">
<img src="img1.jpg">
</div>
<div class="details">
<h3>杨小爱<br><span>Web前端开发-网页设计</span></h3>
</div>
</div>
<div class="swiper-slide">
<div class="imgBx">
<img src="img1.jpg">
</div>
<div class="details">
<h3>杨小爱<br><span>Web前端开发-网页设计</span></h3>
</div>
</div>
<div class="swiper-slide">
<div class="imgBx">
<img src="img1.jpg">
</div>
<div class="details">
<h3>杨小爱<br><span>Web前端开发-网页设计</span></h3>
</div>
</div>
<div class="swiper-slide">
<div class="imgBx">
<img src="img1.jpg">
</div>
<div class="details">
<h3>杨小爱<br><span>Web前端开发-网页设计</span></h3>
</div>
</div>
<div class="swiper-slide">
<div class="imgBx">
<img src="img1.jpg">
</div>
<div class="details">
<h3>杨小爱<br><span>Web前端开发-网页设计</span></h3>
</div>
</div>
<div class="swiper-slide">
<div class="imgBx">
<img src="img1.jpg">
</div>
<div class="details">
<h3>杨小爱<br><span>Web前端开发-网页设计</span></h3>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<script type="text/javascript" src="swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 20,
stretch: 0,
depth: 200,
modifier: 1,
slideShadows : true,
},
pagination: {
el: '.swiper-pagination',
},
});
</script>
</body>
</html>
CSS代码：
body
{
background: #262626;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container
{
width: 100%;
padding-top: 200px;
padding-bottom: 50px;
}
.swiper-slide
{
background-position: center;
background-size: cover;
width: 300px;
height: 380px;
background: #fff;
}
.swiper-slide .imgBx
{
width: 100%;
height: 300px;
overflow: hidden;
}
.swiper-slide .imgBx img
{
width: 100%;
}
.swiper-slide .details
{
box-sizing: border-box;
padding: 20px;
}
.swiper-slide .details h3
{
margin: 0;
padding: 0;
font-size: 20px;
text-align: center;
line-height: 20px;
}
.swiper-slide .details h3 span
{
font-size: 16px;
color: #f44336;
}
写在最后
使用Swiper效果，在我们的视频号上也有类似的案例，具体效果如下：
以上就是我们今天的【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
PS ：我们的视频号营运有段时间了，如果你还没有关注我们的视频号的话，请记得关注我们的视频号。
