轮播切换效果图

效果图

TIM截图20190115173747.png

css

.tl-card{
    width:210px;
    height:123px;
    border-radius:6px;
    float: left;
    margin-right: 17px;
    padding-left: 20px;
    padding-right: 20px;
}

.tl-color-0{
    background: #FDAF94;
}
.tl-color-1{
    background: #F7D570;
}
.tl-color-2{
    background: #88BDF7;
}
.tl-color-3{
    background: #A78BFA;
}
.tl-color-4{
    background: #5EE7BB;
}
.tl-color-5{
    background: #A3E96B;
}
.tl-color-6{
    background: #DC8BFA;
}
.tl-color-7{
    background: #FB8D8D;
}

.tl-font-30{
    font-size:30px;
    font-family:'PingFang-SC-Bold';
    font-weight:bold;
    color: #ffffff;
}
.tl-font-14{
    font-size:14px;
    font-family:'PingFang-SC-Bold';
    font-weight:bold;
    color: #ffffff;
}
.tl-font-12{
    font-size:12px;
    font-family:'PingFang-SC-Bold';
    font-weight:bold;
    color: #ffffff;
}
.tl-p-b6{
    margin-bottom: 6px;
    display: flex;
}

/********* 这里来展示轮播图的效果******************************************/
.swiper-container {
    width: 96%;
    height: 120px;
    margin: 20px;
    padding-left: 20px;
}
.swiper-slide {
    width: 250px!important;
    height: 120px!important;
    margin-right: 30px!important;
    margin-left: 30px!important;
    text-align: center;
    border-radius:6px;
    /*text-align: center;
    font-size: 18px;
    !* Center slide text vertically *!
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;*/
}

html

<div class="card-content">
        <div class="tl-card tl-color-0">
            <div class="tl-font-30 tl-p-b6">40</div>
            <div class="tl-font-14 tl-p-b6">一级会员人数</div>
            <div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
            <div class="tl-font-12"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
        </div>
        <div class="tl-card tl-color-1">
            <div class="tl-font-30 tl-p-b6">40</div>
            <div class="tl-font-14 tl-p-b6">一级会员人数</div>
            <div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
            <div class="tl-font-12"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
        </div>
        <div class="tl-card tl-color-2">
            <div class="tl-font-30 tl-p-b6">40</div>
            <div class="tl-font-14 tl-p-b6">一级会员人数</div>
            <div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
            <div class="tl-font-12"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
        </div>
        <div class="tl-card tl-color-3">
            <div class="tl-font-30 tl-p-b6">40</div>
            <div class="tl-font-14 tl-p-b6">一级会员人数</div>
            <div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
            <div class="tl-font-12"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
        </div>
        <div class="tl-card tl-color-4">
            <div class="tl-font-30 tl-p-b6">40</div>
            <div class="tl-font-14 tl-p-b6">一级会员人数</div>
            <div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
            <div class="tl-font-12"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
        </div>
        <div class="tl-card tl-color-5">
            <div class="tl-font-30 tl-p-b6">40</div>
            <div class="tl-font-14 tl-p-b6">一级会员人数</div>
            <div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
            <div class="tl-font-12"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
        </div>
    </div>