I'm attempting to make a responsive pure CSS slider/carousel which displays multiple slides at a time. I would like to make sure that only whole slides are visible within the visible bounds of the slider.
To allow some flexibility and "best fit" the slides should be able to shrink and grow within a pre-defined range (e.g. 200-300px) as the user resizes the page. The gaps between each slide should be consistent. Gaps can optionally appear at the edges of the slider as well, if necessary.
Importantly, any overflow (invisible) slides should remain on the same line as the visible slides. They should not be wrapped "below" the visible slider. This is because the slider will eventually be animated (via CSS) to slide horizontally like a ribbon.
This would be possible with JavaScript where you could determine the width of each slide by taking the current visible slider width and dividing it by (e.g.) 200px or 300px, but it feels like this should be possible using just CSS flex or grid or similar.
Code snippet:
.slider {
display: flex;
gap: 40px;
overflow: hidden;
border: 3px solid black;
& > div {
background: lightgray;
min-width: 200px;
max-width: 300px;
}
}<h2>Width: 90vw</h2>
<div class="slider" style="width: 90vw;">
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
</div>
<h2>Width: 60vw</h2>
<div class="slider" style="width: 60vw;">
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
</div>
<h2>Width: 40vw</h2>
<div class="slider" style="width: 40vw;">
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
<div>This whole slide should always be visible</div>
</div>This is how it looks currently:
This is what I'd like to achieve:
