如下图所示
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="./css/swiper-bundle.css">
<!-- Demo styles -->
<style>
body {
background: #fff;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
#swiper-container {
width: 1440px;
height: 650px;
padding-top: 100px;
}
#swiper-container .swiper-slide {
background-position: center;
background-size: cover;
width: 85%;
height: 100%;
visibility: hidden;
}
#swiper-container .swiper-slide.swiper-slide-prev,
#swiper-container .swiper-slide.swiper-slide-next,
#swiper-container .swiper-slide.swiper-slide-active {
visibility: visible;
}
</style>
</head>
<body>
<div class="container" style="margin: 0 auto;">
<!-- Swiper -->
<div class="swiper-container" id="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color: aquamarine;"></div>
<div class="swiper-slide" style="background-color: rebeccapurple;"></div>
<div class="swiper-slide" style="background-color: rgb(127, 157, 255);"></div>
<div class="swiper-slide" style="background-color: rgb(255, 127, 238);"></div>
<div class="swiper-slide" style="background-color: rgb(255, 204, 127);"></div>
<div class="swiper-slide" style="background-color: rgb(223, 240, 77);"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swp-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next swp-button-next"></div>
<div class="swiper-button-prev swp-button-prev"></div>
</div>
</div>
<!-- Swiper JS -->
<script src="./js/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('#swiper-container', {
loop: true,
simulateTouch: false,
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 0,
stretch: "30%",
depth: 350,
modifier: 2,
slideShadows: true,
},
pagination: {
el: '.swp-pagination',
},
navigation: {
nextEl: '.swiper-button-next.swp-button-next',
prevEl: '.swiper-button-prev.swp-button-prev',
},
});
</script>
</body>
</html>
引入的css和js需要自行修改