title: Slick Carousel custom paging not setting dynamic data-attributes
body: <p>I have a webpage that shows a product listing (dynamically loaded from a db). Each product has a ‘Quick View’ button which a user can click and a modal pops up showing a slick carousel of images of the product and its name. However, the modal carousel doesn't set the right data attribute after the first click.</p>
  
  <p>In brief what I want to do is this;
  When the user clicks the ‘Quick View’ button;</p>
  
  <ol>
  <li>Get the 3 data attributes (image path, thumbnail image path, name) from the button element</li>
  <li>Set the attributes as attributes in the modal element</li>
  <li>Attach the modal to slick and then show the modal</li>
  </ol>
  
  <p>Here is my code;
  I have tried take out much of the unimportant stuff and post the relevant parts.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!--the button that is clicked--&gt;
  &lt;div&gt;
    &lt;a href='#' class="block2-btn js-show-modal1" data-pdct-img="image.jpg" data-pdct-name="shoe1"&gt;
      Quick View
    &lt;/a&gt;
  &lt;/div&gt;
  
  
  &lt;!--the code for the modal - initially it's hidden, pops up on click of the button above--&gt;
  &lt;div class="wrap-modal1 js-modal1"&gt;
   &lt;div class="overlay-modal1 js-hide-modal1"&gt;&lt;/div&gt;
      &lt;button class="js-hide-modal1"&gt;
       &lt;img src="images/icons/icon-close.png" alt="CLOSE"&gt;
      &lt;/button&gt;
  
      &lt;div class="wrap-slick3"&gt;
       &lt;div class="wrap-slick3-dots"&gt;&lt;/div&gt;
       &lt;div class="wrap-slick3-arrows"&gt;&lt;/div&gt;
       &lt;div class="slick3 gallery-lb"&gt;            
        &lt;div class="item-slick3" data-thumb="" id="pdct_img_1_thumb"&gt;                                  
         &lt;div class="wrap-pic-w pos-relative"&gt;
          &lt;img src="" alt="IMG-PRODUCT" id="pdct_img_1"&gt;                                   
          &lt;a href="" id="pdct_img_1_large"&gt;                           
           &lt;i class="fa fa-expand"&gt;&lt;/i&gt;                                        
          &lt;/a&gt;
          &lt;/div&gt;                              
         &lt;/div&gt;                               
         &lt;!--other thumbnails--&gt;                                   
        &lt;/div&gt;                
        &lt;div&gt;
          &lt;h4 id="product_name"&gt;&lt;/h4&gt;
        &lt;/div&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  
  </code></pre>
  
  <pre><code>        $('.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:'&lt;button class="arrow-slick3 prev-slick3"&gt;&lt;i class="fa fa-angle-left" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;',
                      nextArrow:'&lt;button class="arrow-slick3 next-slick3"&gt;&lt;i class="fa fa-angle-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;',
  
                      dots: true,
                      appendDots: $(this).find('.wrap-slick3-dots'),
                      dotsClass:'slick3-dots',
                      customPaging: function(slick, index) {
                          var portrait = $(slick.$slides[index]).data('thumb');
                          return '&lt;img src=" ' + portrait + ' "/&gt;&lt;div class="slick3-dot-overlay"&gt;&lt;/div&gt;';
                      },  
                  });
              });
          });     
  
          $('.js-hide-modal1').on('click',function(){
              $('.js-modal1').removeClass('show-modal1');
          });
  </code></pre>
  
  <p>This is the problem;
  When I click the ‘Quick View’ button the first time, every attribute is set correctly in the modal.
  When I close the modal and click on another ‘Quick View’ button, the thumbnail image path of the first button I clicked is what persists for any consequent buttons I clicked thereafter.</p>
  
  <p>I am quite stuck on what I need to do to have the slick carousel pick up the right data attribute in the custom paging function (for the thumbnail image). I'm happy to clarify on anything that may not have come out clearly.</p>
  
  <p>Any guidance is much appreciated. 
  <a href="https://i.stack.imgur.com/xRH8U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xRH8U.png" alt="This is when the quick view button is clicked first. The thumbnails are set correctly"></a></p>
  
  <p><a href="https://i.stack.imgur.com/FyHya.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FyHya.png" alt="When another button is clicked, you can see that the new (correct) thumbnails for that picture haven&#39;t been set; the first ones persist"></a></p>