< 模板:轮播图
.wrap {
width: 800px;
height: 400px;
position: relative;
padding-right:100px;
}
.list {
width: 800px;
height: 400px;
position: relative;
padding-left: 100px;
border: 4px solid #fff;
outline: solid 4px #000;
}
.item {
width: 100%;
height: 100%;
list-style: none;
position: absolute;
left: 0;
opacity: 0;
transition: all .8s;
align-items: center;
text-align:center;
}
.item img{
width: 600px;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.item:nth-child(1) {
background-color: skyblue;
}
.item:nth-child(2) {
background-color: rgb(85, 0, 0);
}
.item:nth-child(3) {
background-color:#5756D4;
}
.item:nth-child(4) {
background-color: black;
}
.item:nth-child(5) {
background-color: rgb(88, 88, 88);
}
.item:nth-child(6) {
background-color: rgb(255,255,255);
}
.item.active {
z-index: 10;
opacity: 1;
}
.btn {
width: 60px;
height: 100px;
z-index: 100;
top: 150px;
position: absolute;
}
#leftBtn {
left: -64px;
}
#rightBtn {
right: -16px;
}
.pointList {
list-style: none;
padding-left: 0px;
position: absolute;
right: 20px;
bottom: 20px;
z-index: 200;
}
.point {
width: 10px;
height: 10px;
background-color: black;
margin-right: 8px;
border-style: solid;
border-width: 2px;
border-color: white;
outline: solid 2px #000;
cursor: pointer;
padding: 1px;
}
.point.active{
background-color: rgb(107, 107, 107);
}
button {
transition-duration: 0.4s;
padding: 16px 32px;
text-align: center;
background-color: white;
color: white;
border: 4px solid #fff;
outline: solid 4px #000;
background-color:#000;
}
button:hover {
background-color: #fff;
color: black;
border: 4px solid #000;
outline: solid 4px #fff;
}
body.skin-cosmos .wrap {
width: 850px;
height: 400px;
position: relative;
padding-right: 36px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
body.skin-cosmos #leftBtn {
left: 0px;
}
body.skin-cosmos #rightBtn {
right: 0px;
margin-right: 10px;
}