wcui/js/lib/sliders/main.scss

@charset "UTF-8";
/**
 *
 * @authors Lincoln (875482941@qq.com)
 * @date    2017-09-07 20:32:11
 * @version $Id$
 */

 @import "../../../css/var.scss";

.do-sliders {position: relative;height: 100%;width: 100%;
    
    .container {position: relative;height: 100%;overflow: hidden;
        .box {height: 100%;width: 100%;transition: .4s;
            a {position:relative;display: inline-block;height: 100%;vertical-align: middle;
                img {width: 100%;height: 100%;object-fit: cover;}
                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;}
            }

        }
    }

    .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,.6);font-weight: bold;z-index: 1;transition: .4s;}
    .slider-btn:hover {color: #fff;}
    .slider-btn:nth-of-type(1){margin-left: 20px;}
    // .slider-btn:nth-of-type(1):hover{animation: left-to-right .3s;}
    .slider-btn:nth-of-type(2){right: 0;margin-right: 20px;}
    // .slider-btn:nth-of-type(2):hover{animation: right-to-left .3s;}

    .btn {position: absolute;bottom: -20px;width: 100%;min-height: 50px;max-height: 100px;margin: 0 auto;text-align: center;overflow: hidden;

        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;}
        span:hover{background:nth($cg, 1);}
        .no-preview-act{background:nth($cg, 3);}

        
        .btn-img{display: inline-block;position: relative;width: 150px;height: 100px;margin: 0 5px;transition: .4s;cursor: pointer;
            img {position: relative;width: 100%;height: 100%;transition: .4s;z-index: 2;}
            .preview-act{transform: scale(.95)}
        }
        .btn-img::after {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #1abc9c;opacity: 0;transition: .8s;z-index: 1;}
        .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;}
}