Slick.js : Le curseur de Slick ne glisse pas correctement (retour à la première diapositive)

Question

Le problème

Je suis en train de mettre en place un slider/carrousel sur un site Wordpress. Tout fonctionne et s'affiche parfaitement, mais le curseur a cessé de glisser correctement.

Je peux toujours faire glisser physiquement le curseur avec la souris et il s'anime comme il le devrait, mais lorsque je lâche le curseur, il revient à la première diapositive et ne me laisse jamais naviguer en arrière ou en avant de la première diapositive en le faisant glisser.

L'utilisation des flèches précédentes et suivantes fonctionne parfaitement, de même que l'utilisation des touches fléchées du clavier, ce qui me rend encore plus confus quant à la raison pour laquelle le glissement ne fonctionne pas.

Ce dont j'ai besoin

Un correctif pour que le glissement ne fonctionne pas et que je puisse naviguer correctement dans le curseur.

**La barre de défilement est également cassée de la même manière sur le mobile lorsque je passe d'une barre à l'autre.

Mon code

Je ne peux pas vous mettre un lien vers le slider car il se trouve sur un site privé pour le moment, mais je vais essayer de mettre tout le code qui me semble pertinent ci-dessous :

(J'utilise le fichier slick.min.js et le fichier slick.css uniquement à partir du téléchargement)

HTML

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

• Il y a plusieurs slider__item's mais ils sont créés dans une boucle WP des articles donc je n'en ai inclus qu'un seul.
• Laisser du contenu dans les diapositives pour que ce billet ne soit pas trop long mais imaginez <p> y <div> balises pour le texte/titres/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;
}

Image de référence

Le curseur est à droite du contenu, "Test post 4" est la première diapositive sur laquelle il revient toujours. Les carrés bleus sont les boutons "prev" et "next".

J'espère que c'est assez d'infos pour partir mais laissez un commentaire si vous avez besoin de quelque chose d'autre, merci d'avance !

Answer 1

C'est une vieille question, mais j'ai eu le même problème. Faire glisser les diapositives avec Slick slider ne fonctionne pas, les diapositives reviennent à la première. La solution pour moi était de définir le paramètre touchThreshold à un nombre plus élevé.

Dans la documentation :

TouchThreshold : Pour faire avancer les diapositives, l'utilisateur doit faire glisser une longueur de (1/tou https://github.com/kenwheeler/slick/#settings

La valeur par défaut est 5. Je l'ai changée en 100 et le déplacement des diapositives fonctionne à nouveau :

touchThreshold:100

Answer 2

Avez-vous essayé d'ajouter le swipeToSlide et la définir comme true ?

J'ai rencontré les mêmes exigences aujourd'hui, peut-être que cela aidera les futurs chercheurs.

Answer 3

Essayez de commenter ou de supprimer cette ligne :

//max = _.slideCount * 2;