wcui/js/lib/sliders/main.css

.do-sliders{position:relative;height:100%;width:100%}.do-sliders .container{position:relative;height:100%;overflow:hidden}.do-sliders .container .box{height:100%;width:100%;transition:.4s}.do-sliders .container .box a{position:relative;display:inline-block;height:100%;vertical-align:middle}.do-sliders .container .box a img{width:100%;height:100%;object-fit:cover}.do-sliders .container .box a p.default-class{position:absolute;width:30%;min-height:30px;line-height:30px;left:0;bottom:15%;right:0;margin:auto;color:#fff;text-align:center;font-size:25px}.do-sliders .slider-btn{position:absolute;top:50%;min-width:50px;min-height:50px;margin-top:-25px;text-decoration:none;font-size:30px;line-height:50px;text-align:center;border-radius:100%;color:rgba(255,255,255,0.6);font-weight:bold;z-index:1;transition:.4s}.do-sliders .slider-btn:hover{color:#fff}.do-sliders .slider-btn:nth-of-type(1){margin-left:20px}.do-sliders .slider-btn:nth-of-type(2){right:0;margin-right:20px}.do-sliders .btn{position:absolute;bottom:-20px;width:100%;min-height:50px;max-height:100px;margin:0 auto;text-align:center;overflow:hidden}.do-sliders .btn span{display:inline-block;width:10px;height:10px;margin:20px 5px;border-radius:100%;background:rgba(255,255,255,0.8);cursor:pointer;transition:.5s}.do-sliders .btn span:hover{background:#1abc9c}.do-sliders .btn .no-preview-act{background:#16a085}.do-sliders .btn .btn-img{display:inline-block;position:relative;width:150px;height:100px;margin:0 5px;transition:.4s;cursor:pointer}.do-sliders .btn .btn-img img{position:relative;width:100%;height:100%;transition:.4s;z-index:2}.do-sliders .btn .btn-img .preview-act{transform:scale(0.95)}.do-sliders .btn .btn-img::after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:#1abc9c;opacity:0;transition:.8s;z-index:1}.do-sliders .btn .btn-img.act::after{opacity:1}@keyframes right-to-left{49%{-webkit-transform:translate(100%)}50%{-webkit-transform:translate(-100%);opacity:0}100%{opacity:1}}@keyframes left-to-right{49%{-webkit-transform:translate(-100%)}50%{-webkit-transform:translate(100%);opacity:0}100%{opacity:1}}