search

FormidableLabs / nuka-carousel

Small, fast, and accessibility-first React carousel library with an easily customizable UI and behavior to fit your brand and site.
https://commerce.nearform.com/open-source/nuka-carousel
Other
3.07k stars 595 forks source link

Scroll by x unless not enough slides #13

Closed tamagokun closed 4 years ago

tamagokun commented 9 years ago

I have a carousel that shows 4 at a time, and scrolls by 4. Works great.

One issue I ran into is when I have 10 slides so there are 2 sets of 4, then on the last set there are only 2 slides so I have 2 slides on the left, and 2 empty spaces on the right. It would be better if at that point the slider just scrolled 2 slides over rather than 4 and leaving an empty space.

I've used slick a lot in the past and am almost certain it does this, so I was hoping for some guidance on doing this with nuka-carousel.

sompylasar commented 8 years ago

:+1:

sompylasar commented 8 years ago

Fixed in #55.

@kenwheeler Please publish this fix to npm.

sompylasar commented 8 years ago

@MarinaaaniraM you are welcome to suggest a fix.

agroves333 commented 8 years ago

I would like to see this as optional. We use this carousel with pagination. Basically we calculate the page number based on the slidesToShow.

So, when we have 10 slides, and slidesToShow = slidesToScroll = 4, the last two are for page 3. This fix breaks that since page is still calculated to be 2 with 2 more scrolled over instead of all 4 as we intended (which is dictated by the prop slidesToScroll).

I think we should add an option to toggle this behavior. Thoughts?

kenwheeler commented 8 years ago

@agroves333 good call, care to PR? Trying to get a release out today at some point.

agroves333 commented 8 years ago

Done

lauterry commented 7 years ago

Hi everyone

is scrollMode props not available yet ?

When will it be published to npm ?

I have the same issue as described by @tamagokun

Thanks

Best regards

lauterry commented 7 years ago

Hello

Any update on this issue please ?

Best regards

ghost commented 7 years ago

@lauterry #249

ashika01 commented 6 years ago

Closing the issue because it has been fixed in a newer version. Please reopen with the issue template if you still experience this issue with the latest stable version. Thank you.

omar-complex commented 5 years ago

This issue still exists. I understand that some commits had to be reverted as noted in the linked issue above^ but the scrollMode prop still has not made it into master or in some other form for those that need it. This issue can be reproduced by simply opening the sandbox demo in the repo README and changing slidesToShow:4 and add slidesToScroll:4 and slidesToScroll={this.state.slidesToScroll} while keeping length:6. Also note how when you click next it scrolls by 2 and avoids whitespace but the dot highlight gets screwed up unless you scroll back to the start. If you click only the dots after scrolling back to the start or refreshing the page there is whitespace on the second page but the proper dot highlighting is preserved. https://codesandbox.io/s/94jx21pyvw

sarmeyer commented 4 years ago

@omar-complex I verified with the newest version (6.0) the issue with the dot highlighting is no longer present. I'm not sure what happened to the scrollMode prop, but I'll open a new issue as an enhancement request so it can be triaged and tracked (more easily than in this old ticket at the end of the list).