關於移動端swiper的2種樣式重置


手機查看效果地址:猛戳 ,PC端查看可以縮放瀏覽器窗口看效果~~

思路:主要考慮選擇器優先級大於默認就可以隨意擼碼

注意:該demo里用的mobile-adaptive.js是讓頁面以rem自適應,也就那么幾行。可以參考:地址

下面附上重置樣式的代碼

.top_banner{
    margin-top: .05rem;
    width: 100%;
    height: 2.8rem;
    position: relative;
}
.top_bannerlists a,.top_bannerlists img{
    display: block;
    width: 100%;
}
.swiper-container-horizontal>#bannerimg-pagination{
    position: absolute;
    display: block;
    width: 225px;
    margin: 0 auto;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -10px;
}
#bannerimg-pagination span{
    width: 25%;
    height: 8px;
    background-color: #3879D9;
    border-radius: 5px;
}
/*----------top_three-----------*/
.top_three{
    margin-top: .1rem;
}
/*swiper重置*/
.experts_carousel{
    position: relative;
}
#swiper-pagination{
    position: absolute;
    margin: 0 auto;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -.3rem;
}
#swiper-pagination span{
    display: block;
    width: .2rem;
    height: .2rem;
    margin-left: .15rem;
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM