title: Custom nav with slick slider going out of sync with carousel slides
body: <p>I'm using <a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">Slick Slider</a> to create a product carousel.</p>
  
  <p>This example shows 4 products in the carousel. As you skip through the slides the nav above the products matches up: <a href="http://teamworksdesign.com/clients/flexicare/categories/single-use-laryngoscopes/" rel="nofollow noreferrer">Example</a></p>
  
  <p>This example shows 2 products. It's cloning the slides to make sure there's always 3 on the screen. The problem with this is that the nav above the products goes out of sync when you skip through: <a href="http://teamworksdesign.com/clients/flexicare/categories/nasopharyngeal-airways/" rel="nofollow noreferrer">Example</a>. Essentially when you're on the cloned slides, when it skips through to the original slides the nav goes back into sync.</p>
  
  <p>How can I get it to match up?</p>
  
  <p>Here's my full code:</p>
  
  <pre><code>    // Category gallery
  
      // Set preferred slidesToShow
      var slidesToShow = 3; // always 3
  
      // Clone the slides.
      var $slides = $('.category-gallery .slide');
      if ($slides.length &lt; slidesToShow + 1) {
          var $slide;
          $slides.each( function(){
              $slide = $(this).clone(true)
                  .insertAfter( $slide || $slides.last() )
                  .addClass('slick-cloned-2')
                  .attr('id', '');
          });
      }
  
      $('.category-gallery').slick({
          dots: false,
          infinite: true,
          slidesToShow: slidesToShow,
          slidesToScroll: 1,
          autoplay: false,
          pauseOnHover:false,
          focusOnSelect: false,
          centerMode:true,
          arrows: true,
      });
  
      $('a.category-nav[data-slide]').click(function(e) {
          e.preventDefault();
          var slideno = $(this).data('slide');
          $('.category-gallery').slick('slickGoTo', slideno - 1);
      });
  
      $('a.category-nav[data-slide="1"]').addClass("highlighted-cat-nav");
      $('.category-gallery').on('afterChange', function(event, slick, currentSlide, nextSlide){
          $('a.category-nav').removeClass('highlighted-cat-nav');
        $('a.category-nav[data-slide=' + (currentSlide + 1) + ']').addClass('highlighted-cat-nav');
      });
  </code></pre>
  
  <p>The problem seems to be on this line:</p>
  
  <pre><code>      $('a.category-nav[data-slide=' + (currentSlide + 1) + ']').addClass('highlighted-cat-nav');
  </code></pre>