CODEWITHSUNDEEP
javascriptjquerysliderslick.js
JJ Gerrish
JJ Gerrish

Reputation: 882

Slick.js: Slick slider not dragging properly (snapping back to first slide)

The Problem

I'm setting up a slick slider/carousel on a Wordpress website. Everything works/displays perfectly, however the slider has stopped dragging correctly.

I can still physically drag the slider with the mouse and it animates as it should, however when I let go of the slider it just snaps back to the first slide and never lets me navigate back or forward from the first slide by dragging

Using the prev and next arrows works perfectly, and so does using the arrow keys on the keyboard which makes me even more confused as to why the dragging doesn't work.

What I need

A fix for the dragging not working so that I can navigate through the slider properly.

**The slider is also broken in the same way on mobile when I swipe through the slider.

My Code

I can't link you to the slider as it's on a private site at the moment, but I will try to put all of the code I think is relevant below:

(I'm using the slick.min.js file and the slick.css file only from the download)

HTML

<div class="slider">
    <div class="slider__item">
        <a href="">
        </a>
    </div>
</div>

JS

$('.slider').slick({
    infinite: true,
    slidesToScroll: 1,
    variableWidth: true,
    dots: false,
    arrows: true,
    focusOnSelect: false,
    prevArrow: $('.home-posts__arrow__prev'),
    nextArrow: $('.home-posts__arrow__next'),
});

CSS

.slider {
    position: absolute;
    left: calc(33.333333% + 30px);
}

.slider__item {
    max-width: 290px;
    margin: 0px 15px;
}

Reference image

The slider is to the right of the content, "Test post 4" is the first slide that it always snaps back to. The blue squares are temp prev and next buttons

enter image description here

I hope that's enough info to go off but leave a comment if you need anything else, thanks in advance!

Upvotes: 4

Views: 23954

Answers (3)

rami
rami

Reputation: 1

Try comment out or remove that line:

//max = _.slideCount * 2;

Upvotes: -1

Ricardo Green
Ricardo Green

Reputation: 1118

Have you tried adding the swipeToSlide option and setting it to true?

Have experienced the same requirements today, maybe this would help future searchers.

Upvotes: 7

Chazz
Chazz

Reputation: 325

This is an old question, but I had the same issue. Dragging slides with Slick slider didn't work, slides snap back to the first slide. The fix for me was setting the touchThreshold to a higher number.

From the docs:

touchThreshold: To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider. https://github.com/kenwheeler/slick/#settings

The default value is 5. I changed it to 100 and dragging slides works again: 

touchThreshold:100

Upvotes: 15

Related Questions