CSS - 如何根據此設計制作響應式 slider

Question

我想根據這個設計制作一個響應式側邊欄

我的主要目標是附加“< 4/12 >”功能並使其響應

這是我的代碼： https://jsfiddle.net/yg8rwbju/1/

enter code here

如果它可以在沒有任何額外庫的情況下完成，那就太好了

Answer 1

制作 1 列

.slider {display: grid; grid-template-columns: 100%; gap: 0 14px;}

要隱藏和切換，您可以添加額外的 class。

<div class="slider__element content">

使用 nth-child 偽隱藏第 3 個和更多元素。

@media only screen and (max-width: 768px) {
.content:nth-child(n + 3){
   display: none;
 }
}

我建議您使用移動優先的樣式。 首先，為移動設備設置樣式，然后為桌面設置樣式。 處理移動樣式問題很好。

@media only screen and (min-width: 768px){}