純粋な CSS 手動スライディング カルーセル (スクロール バーを非表示)

この記事では、純粋な 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;}

実際、水平カルーセルは幅が親を超えていればスライドできます。重要なのは、スクロール バーと最も外側のレイヤーを非表示にすることです。2 番目のレイヤーと 2 番目のレイヤーの両方の高さを固定する必要があります。その場合、外側のレイヤーは内側のレイヤーより少し高く、スクロール バーは一番下にあります。最外層のオーバーフロー: 非表示; 以上です

比較画像:

前:

、

後:

実際には、いくつかの簡単な方法がありますが、-webkit kernel に限定されています。はい、C3 をサポートするブラウザ:

1)::-webkit-scrollbar {/*hideスクロール ホイール*/ 表示: なし; }

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

ただし、純粋な CSS を使用できる場合は、これらを使用しないことをお勧めします。

また、スクロール バーの非表示について話しているので、さらに詳しく説明します。Ionic はスクロール バーを非表示にします:

overflow-scroll="true" を ion-content および style="overflow に追加します。 :auto;" そしてそれだけです!

要約: 上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、 CSS ビデオ チュートリアル をご覧ください。

関連する推奨事項:

php 公共福祉トレーニング ビデオ チュートリアル

CSS オンライン マニュアル

div/css グラフィック チュートリアル

以上が純粋な CSS 手動スライディング カルーセル (スクロール バーを非表示)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。