I already have 
That’s how my demos is working.
Basically you make this structure.
<div class="slider">
<div class="slide-wrap">
<div class="wrapper">
<div class="recur">
etc...
The element called slider has overflow:hidden applied and any width you want.
Slide-wrap is 100% wide but will have overflowing content.
Wrapper is the display:flex element that will allow its children to spill out horizontally from .wrapper.
To slide a screenful of content to the left or right (no matter how many items in view) you just translate .wrapper by 100% or -100% each time.
The calculation you need to make is that you have to work out when to stop sliding one way or the other. That can be done by dividing the number of total items by the number that fit in the viewport and keeping a counter. However as you change screen width a media query will take effect and the number across will change so you probably also need to monitor using matchMedia as well. You would also need to make the same check when you click prev or next.
In my demos I have not implemented the matchMedia check yet as it is on my to do list so is still buggy :slight_smile:
If you want to continue with your current approach then you’d probably need to make all the slides position:absolute and use an aspect ratio technique to hold the space open. Similar to this old demo that was from your old slider thread that was also interested in scroll snapping for mobile.
It’s an interesting problem either way and good practice