.slide-carousel { width: 100%; height: 100%; position: relative; overflow: hidden; } .slide-carousel .item-list { position: relative; height: 100%; width: 100%; overflow: hidden; } .slide-carousel .item-list li .item-content { width: 100%; height: 100%; } .slide-carousel .item-list li .item-content a { display: block; width: 100%; height: 100%; } .slide-carousel .item-list li .item-content a img{ width: 100%; height: 100%; } .slide-carousel .item-list li .item-content a .cover-img { width: 100%; height: 100%; } .slide-carousel .indicator-list { position: absolute; bottom: 20px; left: 85%; margin-left: -63px; z-index: 100; } .slide-carousel .indicator-list a { display: block; width: 150px; height: 70px; border: 5px solid transparent; /*border-radius: 50%;*/ overflow: hidden; background-color: #ccc; /*margin-left: 5px;*/ box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ border:5px solid #242424;; opacity:0.5; } .slide-carousel .indicator-list a.selected { border-color: #FF0000; /*background-color: #FF0000;*/ } .slide-carousel .controls { opacity: 0; } .slide-carousel .controls a { cursor: pointer; text-decoration: none; width: 40px; height: 60px; position: absolute; background-color: rgba(0, 0, 0, 0.2); color: #fff; font-size: 35px; padding-top: 25px; z-index: 2; } .slide-carousel .controls a:hover { background-color: rgba(0, 0, 0, 0.5); } .slide-carousel .controls .item-prev { top: 50%; left: 0; margin-top: -42px; } .slide-carousel .controls .item-next { top: 50%; right: 0; margin-top: -42px; } .slide-carousel .desc { height: 72px; width: 100%; position: absolute; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 99; } .slide-carousel .desc strong { color: #fff; font-size: 20px; line-height: 72px; margin-left: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .slide-carousel:hover .controls { opacity: 1; transition: opacity 0.5s ease; }