Verst adaptive slider problem?

Question

Layout

Faced such a problem: it is not possible to make up 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.
Please don't suggest using pre-made sliders etc. I use bxslider myself, but I want to write such applications myself.

Answer 1

I wrote above that in order to avoid indents between li add ul{ font-size:0; }
Here is a simple slider https://jsfiddle.net/straj/0vc1kz6n/6/
If you still need float:left; then here is an example https://jsfiddle.net/straj/0vc1kz6n/8/

Answer 2

make li block and float:left;
ul let it be of arbitrary width, and wrap the whole thing in a container with overflow:hidden; This is how most sliders work.
ps: in general, you throw this bike and take a ready-made normal slider.