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.

[leadq]

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?

[jota12x]

@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.

I encountered this problem as well.

[taigfs]

Me too.

[p-abasian]

Same here +1

[duongthaison98]

+1

[dikshantpatodia]

@akiran w.r.t. to above scenario, when variableWidth is true and infinite is false, the below issue also occurs

Situation:

• When variableWidth is true
• Arrows are shown (I need to show the arrows as the content is dynamic and it can overflow the viewport)

Issue:

• Arrows should be disabled or should not show when all the elements are visible in viewport

Similar issue was found in swiper js, but they have the provision of watching the overflow by a watchOverflow prop which is set to true, which take care of the above issue mentioned.