<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>封面卡片层叠轮播图</title>
<style type="text/css">
body {
background: #fafafa;
}
.container {
margin: 150px auto;
max-width: 1000px;
position: relative;
}
h1 {
margin-bottom: 5rem;
text-align: center;
}
.gallery {
width: 100%
}
.gallery-container {
align-items: center;
display: flex;
height: 400px;
margin: 0 auto;
max-width: 1000px;
position: relative
}
.gallery-item {
height: 340px;
position: absolute;
transition: all .3s ease-in-out;
width: 140px;
object-fit: cover;
border-radius: 10px;
z-index: 0
}
.gallery-item.gallery-item-selected {
box-shadow: 0 0 30px rgba(255, 255, 255, .6), 0 0 60px rgba(255, 255, 255, .45), 0 0 110px rgba(255, 255, 255, .25), 0 0 100px rgba(255, 255, 255, .1);
height: 480px;
opacity: 1;
left: 50%;
transform: translateX(-50%);
width: 240px;
z-index: 2;
object-fit: cover;
border-radius: 10px;
}
.gallery-item.gallery-item-previous,
.gallery-item.gallery-item-next {
height: 395px;
opacity: 1;
width: 180px;
object-fit: cover;
border-radius: 10px;
z-index: 1
}
.gallery-item.gallery-item-previous {
left: 30%;
transform: translateX(-50%)
}
.gallery-item.gallery-item-next {
left: 70%;
transform: translateX(-50%)
}
.gallery-item.gallery-item-first {
left: 15%;
transform: translateX(-50%)
}
.gallery-item.gallery-item-last {
left: 85%;
transform: translateX(-50%)
}
.gallery-controls {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
z-index: 3;
/* 添加左右内边距，使按钮距离图片 10px */
padding: 0 10px;
box-sizing: border-box;
}
.gallery-controls div {
border: 0;
cursor: pointer;
font-size: 24px;