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

[dryleaf]

I hope this is not a "big ask" but I'm stuck and I love your library as it has helped me a lot in the past.

Overview

My issue is that I'm trying to adjust the variable width slider (in your 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

I'm open to hear your expert solutions.

[diegopamio]

I've made a fix that would allow the finite variable width slider sliders to always fill the display area, using a new setting. I've added the pull request, not sure if it will be handled soon. In any case, you are free to use my own fork in your package.json:
"react-slick": "git+https://[email protected]/diegopamio/react-slick.git",

But ideally, if you can, also please vote so that the pull request gets attention.

[dryleaf]

Thanks. Is there a way I can use your solution in Code Sandbox?

[diegopamio]

According to https://github.com/CompuIves/codesandbox-client/issues/278
you can do that by manually updating the package.json with:
"react-slick": "diegopamio/react-slick.git"

instead of the full uri. I've tried that and it worked for me.

[dryleaf]

It forces 1 slide scroll at a time. You can view here code Sandbox

[diegopamio]

Yes, it does, but know I'm thinking perhaps that's not needed, as it should work even when slidesToScroll > 1... I can modify that guard.

[dryleaf]

My ideal scroller would be the one that is:

• finite
• Variable width
• scrolls all 100% visible slides at a time (irrespective of viewports or screen width)
• with no paddings or centerings

[diegopamio]

Done, I've updated the PR to do that.

[dryleaf]

I have tested and it doesn't work. And the following test case: fails

• Scrolls all 100% visible slides at a time (irrespective of viewports or screen width)

This means that if 3 slides are 100% visible, then they should all be scrolled, and so on.
But your solution always scrolls one slide at time and it can not be changed.

I suggested you test it first with the following code:

• finite variable width

[akimy]

@diegopamio any suggestion for this problem solving?
variableWidth: true
infinite: false, lead to blank space from the right.

I've just expecting last slide right border to intersect slider right border + partially view left slide.
But in last right position 've full size left slide + blank space from the right.

[leadeg]

any fixes for spaces on from right?

[leimonio]

@akiran 👋 is there any update on this issue? I can still reproduce this issue.

[babysteps]

i'm looking for a fix to this as well. any updates?