純CSS手動滑動輪播圖（隱藏滾動條）

HTML：

<div class="bigder">
　　<div class="big">

　　　　<dl>

　　　　　　<dt><img src="img/dongtai.png"/></dt>

　　　　</dl>

　　　　<dl>

　　　　　　<dt><img src="img/dongtai.png"/></dt>

　　　　</dl>　　　

　　　　<dl>

　　　　　　<dt><img src="img/dongtai.png"/></dt>

　　　　</dl>　　　

　　　　<dl>

　　　　　　<dt><img src="img/dongtai.png"/></dt>

　　　　</dl>　　　

　　　　<dl>

　　　　　　<dt><img src="img/dongtai.png"/></dt>

　　　　</dl>

　　</div>
</div>

　　

 

CSS:

.bigder{width: 100%;margin: 0 auto;height: 195px;overflow: hidden;}

.big{overflow-x: scroll;height: 210px; display:flex;justify-content: space-between;}

.bigder dl{background-color: ghostwhite;text-align: center;margin-right: 20px;}

.bigder dl:last-child{padding-right: 0;}

　　

 

其實橫向輪播很簡單，只要寬度超出父級就可以滑動，主要是滾動條要隱藏，最外層和第二層都要有固定高度，然后外層比內層高度高一點，滾動條在最下面，然后最外層overflow：hidden；就可以啦

對比圖：

之前：，

之后：

 

 其實還有一些簡單的方法，但只限於-webkit內核的，支持C3的瀏覽器：

　　1）::-webkit-scrollbar {/*隱藏滾輪*/ display: none; }

　　2）::-webkit-scrollbar{width:0px}

 但是，能用純CSS，就最好不用這些

 

 

還有，既然說到隱藏滾動條，就多說點，Ionic隱藏滾動條：

給ion-content加上overflow-scroll="true",還有style="overflow:auto;"就可以啦