Question

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

我正在使用轮播来显示缩略图列表。可以单击这些缩略图以在页面的预览部分中显示，如果单击预览图像，则会弹出全尺寸图像的轮播。我想要将全尺寸图像的旋转木马放在点击的正确图片上。为此，我使用npm install -g @angular/cli属性

这是我的代码

HTML：

data-slick-index

的jQuery

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

您可以在此处http://algaecal.cloudcreations.ca/

查看此操作

使用此代码，$(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(); }); });无效。全尺寸旋转木马仍然在第一个索引上。

非常感谢任何帮助。

Answer 1

我能够通过使用来实现这一点关闭弹出窗口时$('#image-popup').slick('unslick');。

当页面上有多个光滑的Carousel时，光滑的slickGoTo（）函数无法正常工作

1 个答案: