Bug found. Snapping back to first slide on drag

[pflind]

As title says. Here's a codepen.

Grab the last visible slide (6) and drag it as far to the left as you can and release. Instead of showing the remaining slides, it snaps back to the first slide. Tested on Chrome and Safari, Mac and Windows.

Here's an animated GIF:

[Kehza]

Try changing your margin to margin: 0 30px 0 0; and add the property : "swipeToSlide: true" to your slick initialisation. Seems to function a bit better, but still not perfect.

[pflind]

@Kehza Thanks but it makes no difference and swipeToSlide is already active. This is clearly a bug that needs fixing on a different level.

I think there should be an option to add margin between slides instead of relying on CSS.

[jsoutherner]

wow, still nothing?

[terraelise]

Can confirm, this is still happening. Unable to swipe to the left, always snaps back.

[rlaven]

Same problem here

[ricardoafsilva]

Something about this issue?

[Madeon08]

Same issue here, can't understand what's the problem...

[Madeon08]

The issue for me, is coming from Bootstrap 4, I just tried to use an old version (3.3.4) and it's working fine.

Problem was coming from the .row class, as long as I put the slider in a row tag, the swiping is not working properly, by putting it out from the row, it works just fine 👍

This also could help some of yours, add to your carousel the following CSS settings:

.slick-slider { min-width: 100%; width: 0; }

[honeyamin]

in my case

1. i add dir="ltr" to my slider element,
2. remove slidesToScroll because using swipeToslide
3. add float:left !important; to .slick-slide NOT .-sclick-slidER also rtl:true is not working by swipeToslide (if in your html or body there is dir="rtl" and you like use rtl:true but this setting doent work by swipeToslide setting)

[iamharshad]

Any update?

[spawn004]

Any update?

looks like bug still exists ;(

[lefouk]

Getting rid of the previous and next buttons helped for me to get clean dragging: .slick-prev, .slick-next { display: none!important; }

[SumitGA]

I think this should help with smooth draggable feature. Its clearly mentioned in the docs. To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider. As you see it totally depends upon the touchThreshould.

[tura96]

In my case set swipeToSlide: false fix the problem

[coffeecupjapan]

In case of react-slick, I fix it using swipeEvent ( or onSwipe ). Maybe it can be applied to slick using on swipe in slick ( I didn't try it ).

First add sliderRef to Slider Object

const sliderRef = useRef<Slider | null>(null)
...
// at Slider component
<Slider ref={sliderRef}>

Second set currentSlide at SliderSetting

const [currentSlide, setCurrentSlide] = useState(0);
...
// at SliderSetting
beforeChange: (_prev, next) => {
  setCurrentSlide(next);
}

Third at SliderSetting add code below.

// at SliderSetting
swipeEvent: (e) => {
  e === "left"
  ? sliderRef.current.slickGoto(currentSlide + 1)
  : sliderRef.current.slickGoto(currentSlide - 1)
}