我正在使用Ken惠勒Slick.js在我的页面上显示一个carousel。
我正在使用旋转木马来显示缩略图列表。这些缩略图可以被点击以显示在页面上的预览部分中，如果预览图像被点击，则弹出全尺寸图像的旋转木马。我想对正确的图片是点击图片的全尺寸图像旋转木马strt。为此，我使用data-slick-index属性
这是我的代码
超文本标记语言：

<div class="image-popup-container">
    <button id="close"><i class="fa fa-times"></i></button>
    <div id="closearea"></div>

    <ul id="image-popup" class="image-popup">
        <li class="product-image">
            <img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-guarantee-7-year-square.png" alt="AlgaeCal 7 Years Guarantee" />
        </li>
        <li class="product-image">
            <img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-Plus-Product-Main-Image.png" alt="AlgaeCal Plus Main Product Image" />
        </li>
        <li class="product-video">
            <iframe src="//fast.wistia.net/embed/iframe/w4ithbv9tz" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="640" height="360"></iframe>
        </li>
    </ul>
</div>

<div class="images">
    <div id="image-preview" data-slick-index="0">
        <img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-guarantee-7-year-square.png" alt="AlgaeCal 7 Years Guarantee" />
    </div>
    <ul id="image-thumbs" class="thumbnails">
        <li class="product-image-thumbnail">
            <img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-guarantee-7-year-square.png" alt="AlgaeCal 7 Years Guarantee" />
        </li>
        <li class="product-image-thumbnail">
            <img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-Plus-Product-Main-Image.png" alt="AlgaeCal Plus Main Product Image" />
        </li>
        <li class="product-video-thumbnail">
            <img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-Plus-Product-Main-Video-Thumbnail.jpg">
        </li>
    </ul>
</div>

字符串
jQuery

$(document).ready(function(){

// Load Carousel of thumbnails
$('.thumbnails').slick({
    dots: false,
    prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow slick-disabled" aria-label="Previous" role="button" aria-disabled="true" style="display: block;"><i class="fa fa-chevron-left"></i></button>',
    nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;" aria-disabled="false"><i class="fa fa-chevron-right"></i></button>',
    infinite: false,
    speed: 300,
    slidesToShow: 1,
    centerMode: false,
    variableWidth: true
});

// Grab Preview image
var imagePreview = $("#image-preview")

// Open product video thumbnail into iframe popup
// Listen for when product-video-thumbnail is clicked
$('.product-video-thumbnail').click(function(){
    // Grab clicked product-video-thumbnail data-slick-index
    var videoData = $(this).attr('data-slick-index');

    imagePopupContainer.fadeIn();
    $('.image-popup').slick({
        centerMode: true,
        prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow slick-disabled" aria-label="Previous" role="button" aria-disabled="true" style="display: block;"><i class="fa fa-chevron-left"></i></button>',
        nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;" aria-disabled="false"><i class="fa fa-chevron-right"></i></button>',
        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
                }
            }
        ]
    });
    // Go to the correct slide
    $('.image-popup').slick('slickGoTo', videoData);
});

// Listen for when product-image-thumbnail is clicked
$('.product-image-thumbnail').click(function(){
    // Grab clicked product-image-thumbnail attributes and img attributes
    var imageSrc = $(this).find('img').attr('src');
    var imageAlt = $(this).find('img').attr('alt');
    var imageData = $(this).attr('data-slick-index');

    // Fade out the preview image
    imagePreview.fadeOut( function(){
        // Change preview image src to clicked thumbnail src
        imagePreview.find('img').attr("src", imageSrc);
        // Change preview image alt to clicked thumbnail alt
        imagePreview.find('img').attr("alt", imageAlt);
        // Update the slick-index for modal popup carousel
        imagePreview.attr("data-slick-index", imageData);
    });
    // Fade the preview image back into view
    imagePreview.fadeIn();
});

var imagePopupContainer = $(".image-popup-container")

imagePreview.click(function(){
    imagePopupContainer.fadeIn();
    $('.image-popup').slick({
        centerMode: true,
        prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow slick-disabled" aria-label="Previous" role="button" aria-disabled="true" style="display: block;"><i class="fa fa-chevron-left"></i></button>',
        nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;" aria-disabled="false"><i class="fa fa-chevron-right"></i></button>',
        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)无法正常工作。全尺寸旋转木马保留在第一个索引上。
如有任何帮助，我们将不胜感激。