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

dryleaf commented 6 years ago

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:

finite
responsive (to different viewports) (if possible to display as many slides according to viewport width)
scroll only 100% visible slides
slides should fill the div display area

Observations

So far, I have managed to make it:
- finite
Regarding responsive, breakpoints don't work well for variable width slides.
scroll only 100% visible slides, This is very important when it comes to variable viewport width and when using variable width slides.
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 commented 6 years ago

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://git@github.com/diegopamio/react-slick.git",

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

dryleaf commented 6 years ago

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

diegopamio commented 6 years ago

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 commented 6 years ago

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

diegopamio commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

dryleaf commented 6 years ago

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 commented 5 years ago

@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 commented 4 years ago

any fixes for spaces on from right?

leimonio commented 4 years ago

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

babysteps commented 4 years ago

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

jota12x commented 3 years ago

@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 commented 2 years ago

Me too.

p-abasian commented 2 years ago

Same here +1

duongthaison98 commented 1 year ago

+1

dikshantpatodia commented 1 year ago

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

akiran / react-slick