web-dev-qa-db-fra.com

Slick Slider méthode slickGoTo briser le carrousel

Je travaille sur une page d'article d'actualités qui contient également une galerie d'images. J'utilise slick slider pour les vignettes de la galerie. Chaque image de la galerie a sa propre URL pour la consultation des annonces (pas Nice, mais je ne peux rien y faire), comme notre-url.com/category/articlewithgallery/1, 2 ou 3, etc.

J'utilise des points d'arrêt sensibles comme ceci:

$('.gallery-thumbs').slick({
  slidesToShow: 5, slidesToScroll: 5, dots: false, infinite: false, speed: 300,
  responsive: [ { breakpoint: 1024, settings: { slidesToShow: 5, slidesToScroll: 5 } },
  { breakpoint: 600, settings: { slidesToShow: 4, slidesToScroll: 4 } },
  { breakpoint: 438, settings: { slidesToShow: 3, slidesToScroll: 3 } },
  { breakpoint: 270, settings: { slidesToShow: 2, slidesToScroll: 2 } } ]
} );

et cela fonctionne bien. Mais comme nous avons beaucoup d'URL, j'aimerais que les vignettes commencent sur l'image chargée actuelle. Je peux accomplir cela en ajoutant ceci:

$('.gallery-thumbs').slickGoTo(parseInt(cur_pic));

Les vignettes commencent au bon endroit, mais le carrousel est cassé. Par exemple, je ne peux plus le faire défiler à l'envers. Je peux faire glisser et voir qu'il y a plus de vignettes dans cette direction, mais cela ne fait que rebondir au (nouvel) emplacement de départ. De plus, si nous en sommes aux dernières "diapositives", cela ne les affiche pas du tout ou ajoute un espace vide après toutes les vignettes.

Je pensais que c'était peut-être parce que je n'utilisais pas la fonction "onInit" des curseurs lisses et que cela le gênait parce que nous lui disions d'aller sur cette diapositive avant l'initialisation ou quelque chose du genre. J'ai essayé toutes sortes de choses et je n'ai pas réussi à faire fonctionner onInit: function ().

Peut-être parce que je suis assez mauvais en javascript.

javascriptjqueryslick.js
9
jimihenrik

Sa fonctionne. code: $('.firstDiv').slickGoTo(4);

S'il vous plaît voir ci-dessous exemple 

http://jsfiddle.net/9fnmegqb/

Et à partir de la version 1.4+: $('.firstDiv').slick('slickGoTo', 4)

9
Praveen G

A partir de la version 1.4, les méthodes d'appel des actions ont été modifiées.

La ligne de code équivalente pour la fonction slickGoTo() est $('#slider_selector_id').slick('slickGoTo', slide_number);

(où #slick_selector_id est l'identifiant du curseur et slide_number un entier de l'index de la diapositive requis)

(réponse du commentaire suggéré par Alexandre Bourlier en réponse au autre réponse ici )

5
Simon Shirley

La solution que j’ai trouvée efficace est de changer l’infini en vrai

$('.gallery-thumbs').slick({
  slidesToShow: 5, slidesToScroll: 5, dots: false, infinite: true, speed: 300, responsive: 
  [ 
    { breakpoint: 1024, settings: { slidesToShow: 5, slidesToScroll: 5 } },
    { breakpoint: 600, settings: { slidesToShow: 4, slidesToScroll: 4 } },
    { breakpoint: 438, settings: { slidesToShow: 3, slidesToScroll: 3 } },
    { breakpoint: 270, settings: { slidesToShow: 2, slidesToScroll: 2 } } 
  ] 
});

Je sais que le poste a 3 ans, mais je devais poster une solution de contournement.

2
gmetax