当页面上有多个slick Carousel时，slickGoTo()函数不起作用。

我正在使用Ken Wheeler的Slick.js在页面上显示一个轮播图。

我使用轮播图来展示缩略图列表。这些缩略图可以点击，在页面上显示预览部分，如果点击预览图像，则弹出一个全尺寸图像的轮播图。我希望全尺寸图像的轮播图从点击的正确图片开始。为了做到这一点，我使用了data-slick-index属性。

以下是我的代码：

HTML：

jQuery

$(document).ready(function(){
// 加载缩略图轮播图
$('.thumbnails').slick({
    dots: false,
    prevArrow: '',
    nextArrow: '',
    infinite: false,
    speed: 300,
    slidesToShow: 1,
    centerMode: false,
    variableWidth: true
});
// 获取预览图像
var imagePreview = $("#image-preview")
// 打开产品视频缩略图到iframe弹出窗口
// 监听产品视频缩略图的点击事件
$('.product-video-thumbnail').click(function(){
    // 获取点击的产品视频缩略图的data-slick-index
    var videoData = $(this).attr('data-slick-index');
    imagePopupContainer.fadeIn();
    $('.image-popup').slick({
        centerMode: true,
        prevArrow: '',
        nextArrow: '',
        centerPadding: '60px',
        slidesToShow: 1,
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 3
                }
            },
            {
                breakpoint: 480,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 1
                }
            }
        ]
    });
    // 跳转到正确的幻灯片
    $('.image-popup').slick('slickGoTo', videoData);
});
// 监听产品图像缩略图的点击事件
$('.product-image-thumbnail').click(function(){
    // 获取点击的产品图像缩略图的属性和img属性
    var imageSrc = $(this).find('img').attr('src');
    var imageAlt = $(this).find('img').attr('alt');
    var imageData = $(this).attr('data-slick-index');
    // 淡出预览图像
    imagePreview.fadeOut( function(){
        // 将预览图像的src更改为点击的缩略图src
        imagePreview.find('img').attr("src", imageSrc);
        // 将预览图像的alt更改为点击的缩略图alt
        imagePreview.find('img').attr("alt", imageAlt);
        // 更新模态弹出窗口轮播图的slick-index
        imagePreview.attr("data-slick-index", imageData);
    });
    // 淡入预览图像
    imagePreview.fadeIn();
});
var imagePopupContainer = $(".image-popup-container")
imagePreview.click(function(){
    imagePopupContainer.fadeIn();
    $('.image-popup').slick({
        centerMode: true,
        prevArrow: '',
        nextArrow: '',
        centerPadding: '60px',
        slidesToShow: 1,
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 3
                }
            },
            {
                breakpoint: 480,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 1
                }
            }
        ]
    });
    var index = $("#image-preview").attr("data-slick-index");
    alert(index);
    $('.image-popup').slick('slickGoTo', index);
})
$("#closearea").click(function(){
    imagePopupContainer.fadeOut();
});
$("#close").click(function(){
    imagePopupContainer.fadeOut();
});
});

你可以在这里查看当前的操作 http://algaecal.cloudcreations.ca/

使用这段代码，slick('slickGoTo', index)不能正常工作。全尺寸轮播图始终停留在第一个索引上。

非常感谢您的帮助。