@cw-devops/bk-magic-vue/lib/ui/swiper.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

.bk-swiper-home{
    position:relative;
    overflow:hidden
}

.bk-swiper-home:hover .bk-swiper-nav{
        display:block;
    }

.bk-swiper-main{
    height:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    overflow:hidden
}

.bk-swiper-main.bk-transition{
        -webkit-transition:0.5s cubic-bezier(0.42, 0, 0.58, 1);
        transition:0.5s cubic-bezier(0.42, 0, 0.58, 1);
    }

.bk-swiper-main .bk-swiper-card{
        height:100%;
        margin:0;
        padding:0;
    }

.bk-swiper-main .bk-swiper-img{
        display:inline-block;
        height:100%;
        width:100%;
        margin:0;
        background-size:cover;
        background-repeat:no-repeat;
        background-position:center;
    }

.bk-swiper-main .bk-swiper-link{
        cursor:pointer;
    }

.bk-swiper-index{
    position:absolute;
    bottom:10px;
    left:0;
    right:0;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    margin:0;
    padding:0;
}

.bk-swiper-index li{
        width:11px;
        height:4px;
        margin:0 3px;
        background:#63656e;
        border-radius:2px;
        -webkit-transition:width 0.525s;
        transition:width 0.525s;
        list-style-type:none
    }

.bk-swiper-index li.bk-current-index{
            width:17px;
            background:#c5c7d1;
        }

.bk-swiper-nav{
    cursor:pointer;
    position:absolute;
    border-radius:50%;
    width:30px;
    height:30px;
    background:rgba(31,45,61,.4);
    top:calc(50% - 15px);
    display:none;
}

.bk-swiper-nav .bk-swiper-nav-icon{
        position:absolute;
        top:9px;
        left:11px;
        width:10px;
        height:10px;
        border-left:2px solid #fff;
        border-bottom:2px solid #fff;
    }

.bk-swiper-nav.bk-nav-prev{
        left:14px;
        -webkit-transform:rotate(45deg);
                transform:rotate(45deg)
    }

.bk-swiper-nav.bk-nav-prev:hover{
            -webkit-transform:rotate(45deg);
                    transform:rotate(45deg);
        }

.bk-swiper-nav.bk-nav-next{
        right:14px;
        -webkit-transform:rotate(225deg);
                transform:rotate(225deg)
    }

.bk-swiper-nav.bk-nav-next:hover{
            -webkit-transform:rotate(225deg);
                    transform:rotate(225deg);
        }

.bk-swiper-nav:hover{
        background:rgba(31,45,61,.6);
    }