Slick Carousel和Variant Select首次亮相Shopify

Question

我正在尝试同步此光滑滑块和“首次亮相”主题（Shopify）中的“选项变体”。

我已经尝试实施此Slick carousel sync to select

这对我不起作用。我应该把“ #select”的字面意思放在哪？这个“单选项选择器”？

有什么想法吗？请帮忙。谢谢

滑子代码：

  <script type='text/javascript'>
$(function(){
  $('.slickslider').slick({
    arrows: true,
    adaptiveHeight: true,
    asNavFor: '.slickslider1',
    infinite: true,
    speed: 500,
    slidesToShow: 1,
  });
    $(document).on('change', '.single-option-selector', function(){
    var hittedIndex = $('span img#' + customVal).data('index');
    console.log('span img[addata=' + customVal + ']');
    if(hittedIndex != undefined)
    $('.slickslider').slick('slickGoTo', hittedIndex);
});

  <script type="text/javascript">
jQuery(document).ready(function(){
  jQuery('.slickslider1').slick({
    dots: true,
    arrows: true,
    asNavFor: '.slickslider',
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    focusOnSelect: true,
    responsive: [{
    breakpoint: 1024,
    settings: {
    slidesToShow: 3,
    slidesToScroll: 1,}}, 
        {breakpoint: 900,
        settings: {
        slidesToShow: 2,
        slidesToScroll: 1,}},]
});
   $(document).on('change', '.single-option-selector', function(){
    var hittedIndex = $('span img#' + customVal).data('index');
    console.log('span img[addata=' + customVal + ']');
    if(hittedIndex != undefined)
    $('.slickslider1').slick('slickGoTo', hittedIndex);
   });                        
});