Tengo un control deslizante Slick como el ejemplo que se muestra en la página Slick, estoy usando el código como este,

 <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>

con una carrusel de miniaturas

 <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>

Ahora el Código Js es algo como esto:

 $('.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 });

Esto funciona bien, pero lo que estoy tratando de lograr es en la diapositiva actual del pulgar. Quiero agregar algo, como clase, o en el elemento interno del pulgar actual (aquí, por ejemplo: img).

Probé un código como este:

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

pero no funciona, ¿cuál es el problema con mi código? ¿Hay alguna manera de hacer que esto funcione correctamente?