更改功能内部的滑动滑块功能不起作用

Question

I have built a product page that has a colour variation select. I'm trying to make it work that when a user selects a colour from the dropdown the slick slider will go to the corresponding slide.

I have added data-attr to each slick slide that contain the colour name and use this to the slide index.

The slickgoto function works when I move it outside of the change function.

  $( "#pa_colour" ).change( function() { var prod_color = $( "#pa_colour option:selected" ).val(); var slide_index = parseInt( $( ".slider-for" ).find('[data-color="' + prod_color + '"]').data("slick-index") ) -1; $( ".slider-for" ).slick( 'slickGoTo', slide_index, false); }); 

Thanks

Answer 1

No sure the false is necessary. Have you tried:

$('.slide-for').slick('slickGoTo', slide_index);

Otherwise I would adjust it to:

var slideshow = $( ".slider-for" );

slideshow.slick({ ... });

$( "#pa_colour" ).change( function() { 

   var prod_color = $( "#pa_colour option:selected" ).val();
   var slide_index = parseInt( $( ".slider-for" ).find('[data-color="' + prod_color + '"]').data("slick-index") ) -1;

   slideshow.slick( 'slickGoTo', slide_index );

});

Hope this helps.