Отзывчивый чистый ползунок CSS/карусель: как гарантировать, что только * целые * изгиб или сетка видны? ⇐ Html

[Anonymous]

Я пытаюсь сделать отзывчивый ползунок/карусель CSS, который отображает несколько слайдов за раз. Я хотел бы убедиться, что только целые слайды видны в видимых границах слайдера. иметь возможность сокращаться и расти в рамках заранее определенного диапазона (например, 200-300px), поскольку пользователь изменяет размер страницы. Разрывы между каждым слайдом должны быть последовательными. Защиты также могут появиться и по краям ползунка, если это необходимо. Они не должны быть обернуты »ниже» видимого ползунка. Это связано с тем, что ползунок в конечном итоге будет анимирован (через CSS), чтобы скользить горизонтально, как лента. Видимая ширина ползунка и разделение ее на (например,) 200px или 300px, но кажется, что это должно быть возможно, используя только CSS Flex или Grid или аналогичный.
фрагмент кода: < /p>


.slider {

display: flex;
gap: 40px;
overflow: hidden;
border: 3px solid black;

& > div {
background: lightgray;
min-width: 200px;
max-width: 300px;
}

}< /code>
Width: 90vw

This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible


Width: 60vw

This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible


Width: 40vw

This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
This whole slide should always be visible
< /code>
< /div>
< /div>
< /p>
Вот как он выглядит в настоящее время: < /p>

Это то, что я хотел бы к Дополнение:


Подробнее здесь: https://stackoverflow.com/questions/794 ... r-grid-ite