Pure CSS manual sliding carousel (hide scroll bar)

This article introduces you to pure CSS manual sliding carousel (hidden scroll bar). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

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;}

In fact, the horizontal carousel is very simple. As long as the width exceeds the parent, it can be slid. The main thing is to hide the scroll bar and the outermost layer. Both the second layer and the second layer must have a fixed height, then the outer layer is a little higher than the inner layer, the scroll bar is at the bottom, and then the outermost layer overflow: hidden; that’s it

Comparison picture:

Before:

,

After:

In fact, there are some simple methods, but they are limited to -webkit kernel Yes, browsers that support C3:

1)::-webkit-scrollbar {/*hide scroll wheel*/ display: none; }

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

However, if you can use pure CSS, it is best not to use these

Also, since we are talking about hiding scroll bars, let me say more, Ionic hides scroll bars:

Add overflow-scroll="true" to ion-content and style="overflow:auto;" and that's it!

Summary: The above is the entire content of this article, I hope it can It will be helpful to everyone’s study. For more related tutorials, please visit CSS Video Tutorial!

Related recommendations:

php public welfare training video tutorial

CSS Online Manual

##div/css graphic tutorial

The above is the detailed content of Pure CSS manual sliding carousel (hide scroll bar). For more information, please follow other related articles on the PHP Chinese website!