javascript - Slick.js: Slick slider not dragging properly (snapping back to first slide) - Stack Overflow

admin管理员组

文章数量:1201570

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>

• There are multiple slider__item's but they are created in a WP Loop of the posts so I have only included one
• Leaving out content in slides so that this post isn't too long but imagine <p> and <div> tags for text/titles/images etc...

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

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

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>

• There are multiple slider__item's but they are created in a WP Loop of the posts so I have only included one
• Leaving out content in slides so that this post isn't too long but imagine <p> and <div> tags for text/titles/images etc...

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

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

• javascript
• jquery
• slider
• slick.js

Share Improve this question Follow asked Aug 23, 2018 at 11:17 JJ GerrishJJ Gerrish 88211 gold badge1212 silver badges2929 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 15

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

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

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

Try comment out or remove that line:

//max = _.slideCount * 2;

本文标签： javascriptSlickjs Slick slider not dragging properly (snapping back to first slide)Stack Overflow