title: Slick carousel sync to select
body: <p>I'm trying to sync a slick slider to an HTML select and having quite a hard time with it.</p>
  
  <p>Here is my code  :</p>
  
  <pre><code>$(function() {    
      $('.slick-slider').slick({
          slidesToShow: 1,
          slidesToScroll: 1,
          infinite: false,
          autoplay: false,
          draggable: false,
          arrows: false,
          swipe: false,
          speed: 200,
          fade: true,
          lazyLoad: 'progressive',
          cssEase: 'linear'
      });
      var select = $("#select");
      var $carousel = $('.slick-slider');
      $("#select").change(function() {
          goTo = select.selectedIndex;
          $carousel.slick("goTo", goTo);
      });
  });
  </code></pre>
  
  <p>There is the same amount of options/slides.</p>
  
  <p>I've been trying different things but since I'm quite ignorant JavaScript wise, I'm still stuck..</p>
  
  <p><a href="https://jsfiddle.net/70he30n1/" rel="nofollow noreferrer">https://jsfiddle.net/70he30n1/</a></p>
  
  <p>->>> Solution : <a href="https://jsfiddle.net/gpuubf5y/7/" rel="nofollow noreferrer">https://jsfiddle.net/gpuubf5y/7/</a></p>