Feature Request: slidesToScroll according to swipe strength (Physics-based scroll)

[Binternet]

I want to achieve the 'rubber band' effect like the iPhone contacts, right now I am using the responsive setting yet when I do a strong (or long) swipe is still slides a fixed number of slides. is there any way we can support that?

[kenwheeler]

Coming soon

[owzim]

@kenwheeler how soon? I am using slick, which is awesome, best slider/carousel solution I've come across yet, so a huge thanks for your efforts! Is it still actively developed? It seems like PRs and Issues are piling up.

[kenwheeler]

It is. I took a month off after the holidays and getting back to speed has been tough, trying to push through a lot of invalid or "help" issues, to get everything organized and address valid issues and introduce new features. Expect some solid development in the near future. Likely starting back this weekend.

[kenwheeler]

Btw, if anyone is reading this, sorry for taking a month off, I just needed to do it for sanity's sake. I had gotten all pudgy and I needed to sort some things out at home and at work. Expect a glorious return.

[Binternet]

@kenwheeler, life (and people) are more important than computers. you don't need to be sorry for living your life. that's the beauty in this community and open source software, no one is peeking over your shoulder to see how much features you ship. everything is great, keep on the good job =)

[owzim]

@kenwheeler totally agree with @Binternet, sorry if my post came across wrong.

[kenwheeler]

@owzim it didnt, just wanted to let everyone know why theres been a lack of activity

[kenwheeler]

I just added edgeFriction, so that on non-infinite carousels, the edge is harder to scroll than usual. It provides resisitance. That said, is there anything else, physics wise you guys want? If so, lets have a discussion about how it should work.

[owzim]

How about an option to disable snapping of slides entirely, so that the user can scroll through the slides depending how strong they swiped.

Or better yet, the user swipes and it scrolls and scrolls and scrolls until a certain min speed (via options) is reached and then it snaps to the nearest slide. That's be awesome, and flexible too.

[EnigmaSolved]

@owzim, those are intriguing ideas! I have to think some about whether those features are something I would use in my particular use-cases, but I'd be interested in viewing examples of what you're envisioning if you have any handy (eg, perhaps videos of these types of UI in other contexts, such as software).

I can see where the 2nd one especially could be really useful for very long carousels.

[kenwheeler]

I tried to do this, and I couldn't really get it where I wanted it. Slick isn't really set up for a free scroll. There are so many options that conflict with each other and depend on explicit positions that it would probably introduce a ton more bugs. I will probably rewrite how Slick renders slides for 2.0.

If you want the physics style sliding I recommend checking out https://github.com/metafizzy/flickity , @metafizzy did an outstanding job providing this kind of functionality.

[zslabs]

Was actually coming hear to write a feature request for just this. Typical use-case for me would be variable width thumbnails below a gallery. Thanks as always for the consideration and do hope to see it in future versions.

[dil25]

did this free scroll function implemented?

[ketelsb]

How is Slick 2.0 coming around with the freeslider option? For me, this is the only option lacking from this slider plugin. Great job.

[Ralonsogit]

Any new? Free scroll mode would be a fantastic feature. Excellent job @kenwheeler.

[kenwheeler]

@Ralonsoafl it requires a bit of re-architecture. I have local demos working, but the biggest challenge is to have that work well with the current feature set. I could release a free scrolling carousel tomorrow, but it wouldn't have the rest of the features that makes slick great.

[ZaDarkSide]

Any news on free scroll mode?

[kenwheeler]

@Zadarkside working on a rewrite that will allow this to be possible. Unfortunately, with the amount of options that slick has, and the amount of free time that I have, this is going take a little while

[ZaDarkSide]

If I manage to write something to allow free scroll for the current version 1.6.0 I will do a PR, maybe that will help.

[SaswatArabinda]

@ZaDarkSide Any updates on Physics-based scroll?

[Suraj-Kumar-Hemnani]

Hi all,

If you just want to enable swipe irrespective of the slidesToScroll number, you need to change the swipeToSlide setting to true. I has worked for me.

Note: It is not a physics based scroll but may serve the purpose.

[rossanmol]

Hi, are there any updates on this feature?

[apmeyer]

+1 on this feature.

[udg-david-piendl]

+1

[leggomuhgreggo]

Definitely among the top items on our list of priorities. Might end up being in v2, since it's a hefty refactor. PRs are welcome.

Thanks!

[wallyzielinski]

Any chance we could get some velocity handling? As the slider works right now, even if you swipe hard to the left, there's a slight pause before the slider very slowly advanced the remainder of the way to the next slide. Would be great to see that smoothed out.

Great work on this btw, we use it at my agency exclusively because it's so well executed.

[johnylaravel]

+1

[SunnysGlimpse]

Ken, any realistic expectations that you will be adding the ability to free scroll? We have tried Flickity but in v2+ they dropped support for iOS 7 and many older browsers, which are very much still in use. v1 of Flickity doesn't work on newer browsers so unfortunately it is not as cross-browser compatible as Slick.

[scottbarrow]

Hey, I have branch 2.0 checked out, but don't see any additional props that might relate to continious scroll, mentioned on https://github.com/kenwheeler/slick/issues/1665#issuecomment-169175185 or physics scrolling as per this thread. Does branch 2.0 have anything that is useable at this time?

[rscotten]

Turns out it's pretty easy to create a horizontally scrolling carousel with just CSS:

.carousel {
  display: flex;
  -webkit-overflow-scrolling: touch;
  width: 100vw;
  overflow-x: scroll;
  overflow-y: hidden;
}

then

<div class="carousel">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
 ...
</div>

So just use this when you want a free horizontal scroll and not Slick's snapping. It works great for the mobile experience.

[Grienauer]

hey @rscotten! thx for the possible solution with just CSS. what would still be missing:

• indicator if the area is scrollable (e.g. gradient overlay on the side to fade out the element).
• the possibility to drag/scroll with a mouse. because not every user has a touchpad/mouse with a horizontal scroll.
• "physical" bounce effect.

[HaseebXgrid]

Just wondering if this is now implemented?

[digiage]

  -webkit-overflow-scrolling: touch;

I guess this feature was just experimental. It does not work for me. Does it work for you?

[ZaDarkSide]

  -webkit-overflow-scrolling: touch;

I guess this feature was just experimental. It does not work for me. Does it work for you?

It only works on Safari I guess... https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling