html, body, ul, ol, div { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; } img { border: 0; } body{background-color: #151515} .swiper { width: 100%; height: 100%; /*margin: 50px auto;*/ position: relative; } .swiper .pic { width: 100%; display: flex; padding-top: 2px; justify-content: center; height: 100%; position: relative; align-items: center; } .swiper .pic li { -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; -ms-transition: all 0.8s; transition: all 0.8s; width: 77vh; height:46vh; position: absolute; /*top: 30px;*/ /*left: 50%;*/ /*margin-left: -350px;*/ border-radius: 6px; overflow: hidden; box-shadow: 2px 2px 6px 1px rgba(0, 0, 0, 0.5); } .swiper .pic li img { width: 100%; height: 100%; } .now { z-index: 9; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .next { z-index: 6; -webkit-transform: translateX(38vh); -moz-transform: translateX(38vh); -o-transform: translateX(38vh); -ms-transform: translateX(38vh); transform: translateX(38vh); } .prev { z-index: 6; -webkit-transform: translateX(-38vh); -moz-transform: translateX(-38vh); -o-transform: translateX(-38vh); -ms-transform: translateX(-38vh); transform: translateX(-38vh); } ._bg { background-color: red !important; } .swiper .cricle { height: 16px; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .swiper .cricle li { float: left; width: 14px; height: 14px; background-color: #cccccc; margin-right: 6px; border-radius: 50%; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); } .swiper .btns { display: none; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; height: 38px; z-index: 9; } .swiper .btns .leftbtn, .swiper .btns .rightbtn { height: 100%; width: 38px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.5); } .swiper .btns .leftbtn::after, .swiper .btns .rightbtn::after { content: ""; display: block; width: 18px; height: 18px; border-left: 3px solid #ffffff; border-top: 3px solid #ffffff; } .swiper .btns .leftbtn::after { -webkit-transform: translate(12px, 8px) rotate(-45deg); -moz-transform: translate(12px, 8px) rotate(-45deg); -o-transform: translate(12px, 8px) rotate(-45deg); -ms-transform: translate(12px, 8px) rotate(-45deg); transform: translate(12px, 8px) rotate(-45deg); } .swiper .btns .rightbtn::after { -webkit-transform: translate(4px, 8px) rotate(135deg); -moz-transform: translate(4px, 8px) rotate(135deg); -o-transform: translate(4px, 8px) rotate(135deg); -ms-transform: translate(4px, 8px) rotate(135deg); transform: translate(4px, 8px) rotate(135deg); } .leftBox, .rightBox { height: 46vh; position: absolute; top:12vh; z-index: 99; cursor: pointer; } .leftBox { width: 50vh; left: 0; cursor: pointer; } .rightBox { width: 50vh; right: 0; cursor: pointer; }