Finite variable width slider (that scrolls only visible slides), slides should always fill the display area

问题

I hope this is not a "big ask" but I'm stuck. I asked this issue on github issues#1334 but I have not got any responsive from the maintainers of the project. Hopefully I can get help here.

Overview

My issue is that I'm trying to adjust the variable width slider (from react-slick documentation) in order to be:

1. finite

2. responsive (to different viewports) (if possible to display as many slides according to viewport width)

3. scroll only 100% visible slides

4. slides should fill the div display area

Observations

1. So far, I have managed to make it:

   • finite

2. Regarding responsive, breakpoints don't work well for variable width slides.

3. scroll only 100% visible slides, This is very important when it comes to variable viewport width and when using variable width slides.

4. slides should fill thedivdisplay area, finite variable width slides when they reach the last slide, even though it was already visible by the previous scroll, the user can still scroll and what is visible is a huge area of blank slides, for example:

   

The Code

The issue can be replicated and tested in code sandbox

...
...

Any help is welcome.

来源：https://stackoverflow.com/questions/51757342/finite-variable-width-slider-that-scrolls-only-visible-slides-slides-should-a