Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Smooth Scrolling instead of snapping to images #1665

Closed
ljmarkham opened this issue Aug 25, 2015 · 57 comments
Closed

Smooth Scrolling instead of snapping to images #1665

ljmarkham opened this issue Aug 25, 2015 · 57 comments

Comments

@ljmarkham
Copy link

I love this slider but I am wondering if it's possible to have smooth scrolling where the slider stops wherever you stop scrolling at, rather than it snapping to certain images. I have tried playing around with the 'SlidesToShow' and 'SlidesToScroll' settings but on mobile devices it still seems to skip or cut off images with the snap function based on the format of images in each slider (I have a bunch of sliders with different format/size images). Is there any way to edit the code so it functions similar to this example - http://www.xtcdesign.com/pages/serenity-kitchen.php - where it's just a smooth scroll based on the mouse/touch scroll.
Thank you.

@cseeger
Copy link

cseeger commented Aug 27, 2015

+1

I'm no longer seeing this behavior after adding center-mode to my init config.

@mindmelting
Copy link

+1

@ljmarkham
Copy link
Author

Thanks @cseeger but I need my slider to start at the left so center-mode doesn't work for me.

@ljmarkham
Copy link
Author

Thank you for a great slider @kenwheeler but just wondering if there is a solution for smooth scrolling rather than the slider snapping to each image? It seems a few people are interested in knowing how to do this. Thank you.

@kenwheeler
Copy link
Owner

There isn't a way to do this right now, although I could add it.

@cseeger
Copy link

cseeger commented Aug 29, 2015

It would certainly be a nice feature. 😀

@ljmarkham
Copy link
Author

Thanks for your response @kenwheeler. Is it difficult to add? I wasn't sure if there's code that could be added for it. Not well-versed in jquery. Otherwise love the slider.

@kenwheeler
Copy link
Owner

Well, it's tough. Slick uses duration based animation. So it's like you swipe and it animates in 300ms. Free scroll would be physics based, where you have friction and spring, so you swipe and the velocity decrements and subtracts your left position over time on a requestAnimationFrame loop. Basically, they are different set ups. I plan to switch to the second for slick 2.0. In the meantime, Flickity has a great free scroll feature.

@ljmarkham
Copy link
Author

Thanks for the info @kenwheeler. How do I get an update when slick 2.0 comes out?

@kenwheeler
Copy link
Owner

@ljmarkham I'll ping you

@timothywisdom
Copy link

Please "ping" me as well. I love Slick but would like Free Scrolling

@kodie
Copy link

kodie commented Sep 10, 2015

+1!

@zslabs
Copy link

zslabs commented Sep 23, 2015

This would be great!

@dirkbartels14050
Copy link

definitely wanted

@jpannone
Copy link

jpannone commented Nov 8, 2015

Agreed, this would be an awesome feature!
fallout-thumbs

@f1nality
Copy link

f1nality commented Jan 5, 2016

+1

@kenwheeler
Copy link
Owner

This is coming in 2.0. The branch is up now if you wanna look. Modernizing everything, and this issue will be possible when I refactor how slide display and movement works.

@visualjazz-sbrunno
Copy link

+1

@BrianJLennon
Copy link

+1 - just started using slick and LOVE it .... smooth scrolling defo necessary alright. Thanks

@PiotrChr
Copy link

PiotrChr commented Nov 7, 2016

Hi, just one quick question. How is the progress with this particular feature or 2.0 release? My team is using your pretty Slick carousel, and we're really hoping for this feature. For now we have to stick to 2 libraries :( (swiper & slick)

@akashnigam010
Copy link

In dire need of this feature.

@lopugit
Copy link

lopugit commented Apr 3, 2017

+1 on this too! Please really need it, if slick had this, my word.

@jncampbell
Copy link

Any update on when this will be added?

@warapitiya warapitiya mentioned this issue May 14, 2017
@jeanjordan
Copy link

+1

1 similar comment
@EstDiaz
Copy link

EstDiaz commented Jun 22, 2017

+1

@melneff
Copy link

melneff commented Sep 12, 2017

+1

4 similar comments
@imiMike
Copy link

imiMike commented Sep 15, 2017

+1

@taraskhvyl
Copy link

+1

@erenbertr
Copy link

+1

@alexburgos
Copy link

+1

@johnylaravel
Copy link

johnylaravel commented Oct 30, 2017

+3, my two girlfriends want it too! Love your slider, thanks

@marcomansilla
Copy link

While looking for a solucion found this [1] (not mine). Maybe useful for someone.

[1] https://jsfiddle.net/esedic/g0vn3bfg/

@jbugel
Copy link

jbugel commented Mar 26, 2018

Love Slick
would be very happy with this option

+1

@argofgra
Copy link

argofgra commented Apr 6, 2018

+1 Also looking for this feature. Might have to pick a different slider because of it.

@cigar9
Copy link

cigar9 commented Apr 11, 2018

+1

2 similar comments
@nhhau
Copy link

nhhau commented Apr 18, 2018

+1

@alexandraleigh
Copy link

+1

@pucalennetta
Copy link

+1
I cannot find any physics based carousel.
Seems like Slick is the most complete, still lacks this functionality.

@trevorwhealy
Copy link

+1

1 similar comment
@ChristopherMortensen
Copy link

+1

@navinweb
Copy link

navinweb commented Nov 4, 2018

Sorry, 3 years and this is not complete?

@kristiansp
Copy link

From what I've heard, Slick is not really actively developed anymore. I've tried using some alternatives, like Flickity and Swiper, but they each have their limitations (as Slick does for this issue). It's a shame, because I really liked it.

@amoralesdesign
Copy link

I NEED THIS

@AurelianSpodarec
Copy link

I guess we need to abandon Slick and use Flickity or Swiper then.

@kristiansp
Copy link

@AurelianSpodarec FWIW, I've been using TinySlider after giving up on Slick, and have been pretty happy with it.

@Jtzuya
Copy link

Jtzuya commented Apr 12, 2022

Snapping unresolved?

@entryword
Copy link

Anyone knows any update or solutions?

@QgAnhDo
Copy link

QgAnhDo commented Aug 26, 2022

So no updating?

@giretyu
Copy link

giretyu commented Feb 17, 2023

since 2015? surely not

@Hassanshah12-del
Copy link

Hassanshah12-del commented Feb 21, 2023

loloilloiloil

@WEBLAZER
Copy link

WEBLAZER commented Jul 3, 2023

+1

@LaptrinhvaCuocsong
Copy link

I think we can fixed it if we set this when scrolling
{
speed: 0.0,
autoplaySpeed: 0.0,
}

@Aberratio
Copy link

To get a smooth effect in the slider, the css styles must not contain tranistion and transform effects.

I give an example of settings that will set smooth autoscroll, as long as the slider styles do not contain the above mentioned functions.

{
  arrows: false,
  dots: false,
  infinite: true,
  centerMode: true,
  slidesToShow: 1,
  autoplay: true,
  autoplaySpeed: 5000,
  speed: 5000,
  swipeToSlide: false,
  cssEase: "linear",
  variableWidth: true
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests