web-dev-qa-db-fra.com

Obtenez la diapositive actuelle de SLICK SLIDER et ajoutez des classes aux éléments internes

J'ai un curseur Slick comme l'exemple montré dans la page Slick, j'utilise le code comme ça,

<div class="slideshow">
    <img src="http://lorempixel.com/500/250" />
    <img src="http://lorempixel.com/500/251" />
    <img src="http://lorempixel.com/500/249" />
</div>

avec une vignette miniature

<div class="thumbs">
    <img src="http://lorempixel.com/100/100/" />
    <img src="http://lorempixel.com/100/100/" />
    <img src="http://lorempixel.com/100/100/" />
</div>

Maintenant, le code Js est quelque chose comme ceci:

$('.slideshow').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.thumbs'
});
$('.thumbs').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slideshow',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

Cela fonctionne bien, mais ce que j'essaie de réaliser est sur la diapositive actuelle, je veux ajouter quelque chose, comme la classe, ou sur l'élément intérieur du pouce actuel (ici, par exemple: img).

J'ai essayé du code comme celui-ci:

$('.thumbs').on('beforeChange', function(event, slick, currentSlide, nextSlide){
                 $('.slick-current img').addClass('works');                 
                });

mais ne fonctionne pas, quel est le problème avec mon code, existe-t-il un moyen d'obtenir ce travail correctement?

javascriptjquerysliderslick.js
7
Salih K

changer votre fonction beforeChange comme ci-dessous

$('.slideshow').on('beforeChange', function(event, slick, currentSlide, nextSlide){
      $(".slick-slide").removeClass('works');
      $('.slick-current').addClass('works');        
   });

Veuillez trouver dis violon pour votre référence

5
Curiousdev