Slick Carousel 自定义分页未设置动态数据属性

Question

我有一个显示产品列表的网页（从数据库动态加载）。每个产品都有一个“快速查看”按钮，用户可以单击该按钮，然后会弹出一个模式，显示产品图像及其名称的流畅轮播。但是，模态轮播在第一次点击后并没有设置正确的数据属性。

简而言之，我想做的是这个； 当用户点击“快速查看”按钮时；

1. 从按钮元素中获取3个数据属性（图片路径、缩略图路径、名称）
2. 将属性设置为模态元素中的属性
3. 将模态附加到光滑，然后显示模态

这是我的代码； 我已经尝试取出很多不重要的东西并发布相关部分。

<!--the button that is clicked-->
<div>
  <a href='#' class="block2-btn js-show-modal1" data-pdct-img="image.jpg" data-pdct-name="shoe1">
    Quick View
  </a>
</div>


<!--the code for the modal - initially it's hidden, pops up on click of the button above-->
<div class="wrap-modal1 js-modal1">
 <div class="overlay-modal1 js-hide-modal1"></div>
    <button class="js-hide-modal1">
     <img src="images/icons/icon-close.png" alt="CLOSE">
    </button>

    <div class="wrap-slick3">
     <div class="wrap-slick3-dots"></div>
     <div class="wrap-slick3-arrows"></div>
     <div class="slick3 gallery-lb">            
      <div class="item-slick3" data-thumb="" id="pdct_img_1_thumb">                                  
       <div class="wrap-pic-w pos-relative">
        <img src="" alt="IMG-PRODUCT" id="pdct_img_1">                                   
        <a href="" id="pdct_img_1_large">                           
         <i class="fa fa-expand"></i>                                        
        </a>
        </div>                              
       </div>                               
       <!--other thumbnails-->                                   
      </div>                
      <div>
        <h4 id="product_name"></h4>
      </div>
     </div>
  </div>

        $('.js-show-modal1').on('click', function(){
            //e.preventDefault();

            var name = $(this).attr("data-pdct-name");
            var img = $(this).attr("data-pdct-img");

            $("#product_name").html(name);
            $("#pdct_img_1").attr('src','images2/'+img);
            $("#pdct_img_1_thumb").attr("data-thumb",'images2/'+img);
            $("#pdct_img_1_large").attr('href','images2/'+img);
            $('.js-modal1').addClass('show-modal1');


            $('.wrap-slick3').each(function(){
                $(this).find('.slick3').slick({
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    fade: true,
                    infinite: true,
                    autoplay: false,
                    autoplaySpeed: 6000,

                    arrows: true,
                    appendArrows: $(this).find('.wrap-slick3-arrows'),
                    prevArrow:'<button class="arrow-slick3 prev-slick3"><i class="fa fa-angle-left" aria-hidden="true"></i></button>',
                    nextArrow:'<button class="arrow-slick3 next-slick3"><i class="fa fa-angle-right" aria-hidden="true"></i></button>',

                    dots: true,
                    appendDots: $(this).find('.wrap-slick3-dots'),
                    dotsClass:'slick3-dots',
                    customPaging: function(slick, index) {
                        var portrait = $(slick.$slides[index]).data('thumb');
                        return '<img src=" ' + portrait + ' "/><div class="slick3-dot-overlay"></div>';
                    },  
                });
            });
        });     

        $('.js-hide-modal1').on('click',function(){
            $('.js-modal1').removeClass('show-modal1');
        });

这就是问题所在； 当我第一次单击“快速查看”按钮时，模式中的每个属性都已正确设置。 当我关闭模式并单击另一个“快速查看”按钮时，我单击的第一个按钮的缩略图路径是我随后单击的任何后续按钮的路径。

我非常坚持让光滑的轮播在自定义分页功能（对于缩略图图像）中拾取正确的数据属性需要做的事情。我很高兴澄清任何可能没有明确表达的内容。

非常感谢任何指导。

Answer 1

我终于想出了如何解决这个问题，并认为我会发布答案，以防将来有人发现它有用。

我是新手，所以我不知道这一点；了解光滑轮播的重要一点是，它实际上是一组幻灯片。轮播（数组）不是通过 html/javascript 操作修改的，而是通过使用 slick 向数组（轮播）添加和删除幻灯片 - 在这种情况下，幻灯片被格式化为 html 以显示图像或任何相关元素。

考虑到上述情况，关闭问题中的模式（并设置新的数据属性值）不会更改轮播中的缩略图/幻灯片。要将幻灯片更改为新产品的幻灯片，您必须首先从 slick 中删除以前的值（关闭模式时），然后添加新值（打开模式时）。这个解决方案可能有点“hacky”，但它可以完成所需的工作。 这是代码；

   //set the slick options outside the click event handler
   $('.wrap-slick3').each(function(){
     $(this).find('.slick3').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        infinite: true,
        autoplay: false,
        autoplaySpeed: 6000,

        arrows: true,
        appendArrows: $(this).find('.wrap-slick3-arrows'),
        dots: true,
        appendDots: $(this).find('.wrap-slick3-dots'),
        dotsClass:'slick3-dots',
        //remove customPaging because slides are now to be added independently --- see below
     });
   });



   $('.js-show-modal1').on('click', function(){       //click to open modal
     var name = $(this).attr("data-pdct-name");
     var img = $(this).attr("data-pdct-img");

     $("#product_name").html(name);     //set other stuff in the modal

     //add new slides to slick (i.e, every time a modal is opened, construct a new carousel)
     $(".wrap-slick3").each(function(){
        $(this).find(".slick3").slick("slickAdd","<div class='item-slick3' 
             data-thumb='images2/"+img+"'>       
             <div class='wrap-pic-w pos-relative'> 
              <img src='images2/"+img+"'  alt='IMG-PRODUCT'> 
              <a class='' href='images2/"+img+"'>
               <i class='fa fa-expand'></i>
              </a> 
             </div> 
            </div>"); //have limited it to one slide for demo purposes
     });
     $('.js-modal1').addClass('show-modal1');   //then display the modal
   }):    
   //end of modal open/click actions

   //Actions for when the modal is closed
   $('.js-hide-modal1').on('click',function(){
      $('.js-modal1').removeClass('show-modal1');    //close the modal

      //after closing the modal, (empty)remove all the previous slides from the carousel
      $('.wrap-slick3').each(function(){
        $(this).find('.slick3').slick('slickRemove',null,null,true);
      });
   });

<!--Finally modify the html to remove the code for the slides -- because this is now being inserted(added) with slick; see JS above-->
<div class="wrap-modal1 js-modal1">
 <div class="overlay-modal1 js-hide-modal1"></div>
    <button class="js-hide-modal1">
     <img src="images/icons/icon-close.png" alt="CLOSE">
    </button>

    <div class="wrap-slick3">
     <div class="wrap-slick3-dots"></div>
     <div class="wrap-slick3-arrows"></div>
     <div class="slick3">
       <!--code for the slides will be inserted here using the above JS-->                                   
     </div>                
    <div>
     <h4 id="product_name"></h4>
    </div>
   </div>
  </div>

这样才能达到你想要的效果！