Problem with responsive slider layout?

Question

Layout

Please help me with this question:
I faced the following problem: I can't make an adaptive list with pictures in css. I would not like to use unnecessary styling in js. The fact is that it is not possible to wrap the ul itself in a wrapper so that the list elements ( li ) with pictures stand up horizontally and do not stick out so that they can be moved in js. All that happened is either to make ul a very large width and wrap overflow: hidden, or this option https://jsfiddle.net/0vc1kz6n/4/ through white-space: nowrap for the list and display: inline-block for li, but this approach leaves indents from the pictures, it does not suit me. It seems to me that there are more interesting and flexible solutions than these, not to mention js to make an adaptive slider. It would be interesting to know how else this can be done.
Well, they gave me advice:
"make li block and set them to float:left;
let ul be of arbitrary width, and wrap the whole thing in a container with overflow:hidden; - something like this is how most sliders work."
But it doesn't work because the st doesn't diverge because the wrapper has a fixed width. How can I get around this?