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

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

简言之，我想做的是：； 当用户单击“快速查看”按钮时

从按钮元素获取3个数据属性图像路径、缩略图图像路径和名称 将属性设置为模态元素中的属性 将模态连接到slick，然后显示模态 这是我的密码； 我试着把很多不重要的东西拿出来，把相关的部分贴出来

非常感谢您的指导。

---

我终于想出了解决这个问题的办法，我想我会把答案贴出来，以防将来有人发现它有用

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

考虑到上述情况，关闭问题中的模式并设置新的数据属性值不会更改旋转木马中的缩略图/幻灯片。要将幻灯片更改为新产品的幻灯片，必须先在关闭模式时从幻灯片中删除以前的值，然后在打开模式时添加新的幻灯片。此解决方案可能有点“黑客”，但它完成了所需的工作。 这就是代码

   //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);
      });
   });

---

这就是你能达到预期效果的方法

多谢各位！这帮助我解决了我的问题与滑头！

   //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);
      });
   });