.carousel-box{ /* padding-top: 80px;*/ width: 100%; position: relative; height:569px; /*transition: all .2s;*/ /*position: relative;*/ } .carousel-list{ /*position: fixed;*/ /*z-index: 11;*/ width: 100%; } .carousel-buttom-wrap{ position: absolute; top: 50%; } .carousel-prev{ left:40px; } .carousel-next{ right:40px; } .carousel{ display: block; width: 40px; height: 40px; cursor: pointer; } .carousel-prev span:before, .carousel-prev span:after{ content: ''; position: absolute; top: 11px; width: 25px; height: 3px; right: 10px; background: #fff; -webkit-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .carousel-prev span:after{ -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 27px; } .carousel-next span:before, .carousel-next span:after{ content: ''; position: absolute; top: 11px; width: 25px; height: 3px; right: 10px; background: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .carousel-next span:after{ -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 27px; } /*=----*/ .slideDot{ width:auto; position: absolute; bottom: 40px; margin: 0 auto; z-index: 1; left: 0; right: 0; } .slideDot ul{ text-align: center; } .item li{ display: inline-block; width: 10px; height: 10px; background: #8088a1; margin:0 5px; /* opacity: 0.25; */ filter: alpha(opacity=25); border-radius: 10px; cursor: pointer; } .item .activeDot{ background: #fff; } .rslides { /*position: fixed;*/ position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; } .rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; } .rslides li:first-child { position: relative; display: block; float: left; } .rslides img { display: block; height: auto; float: left; width: 100%; border: 0; } #vdo{ width: 100%; height: 100%; object-fit: cover; }