Question

我建立了一个具有颜色变化选择的产品页面。我正在尝试使其工作，当用户从下拉菜单中选择一种颜色时，光滑的滑块将转到相应的幻灯片。

我已向每个包含颜色名称的光滑幻灯片添加了data-attr，并将其用于幻灯片索引。

当我将它移到change函数之外时，slickgoto函数会起作用。

  $( "#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);

  });

谢谢

Answer 1

不确定false是否必要。您是否尝试过：

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

否则，我会将其调整为：

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

});

希望这会有所帮助。

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

1 个答案: