本文介紹純CSS手動滑動輪播圖（隱藏滾動條），有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
HTML：
<p class="bigder"> <p 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> </p> </p>
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;"就可以啦!
總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多相關教學請訪問 CSS影片教學！
相關推薦：
以上是純CSS手動滑動輪播圖（隱藏捲軸）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
