title: Creating variable width carousel issue using slick.js library
body: <p>This is the js fiddle: <a href="http://jsfiddle.net/N6wfG/92/" rel="nofollow noreferrer">http://jsfiddle.net/N6wfG/92/</a>. </p>
  
  <p>This is my js code:</p>
  
  <pre><code>$(document).ready(function(){
      $('.variable-width').slick({
  
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        centerMode: true,
        variableWidth: true,
       // autoplay: true
      });
  
      $('.next-slide').click(function(){
          $("#slide-custom").slickNext();
      });
      $('.prev-slide').click(function(){
          $("#slide-custom").slickPrev();
      });
  });
  </code></pre>
  
  <p>this is the html part:</p>
  
  <pre><code>&lt;script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
  &lt;div class="slider variable-width" id ="slide-custom"&gt;
      &lt;div style="width:500px; height:100px;border:1px solid black;"&gt;1&lt;/div&gt;
      &lt;div style="width:600px; height:100px;border:1px solid black;"&gt;2&lt;/div&gt;
      &lt;div style="width:200px; height:100px;border:1px solid black;"&gt;3&lt;/div&gt;
       &lt;div style="width:600px; height:100px;border:1px solid black;"&gt;4&lt;/div&gt;
      &lt;div style="width:400px; height:100px;border:1px solid black;"&gt;5&lt;/div&gt;
      &lt;div style="width:700px; height:100px;border:1px solid black;"&gt;6&lt;/div&gt;
  &lt;/div&gt;
  &lt;button class="prev-slide"&gt;prev&lt;/button&gt;
  &lt;button class="next-slide" &gt;next&lt;/button&gt;
  </code></pre>
  
  <p>As you can see in the fiddle for some reason the next and prev button are generated, in my site there aren't. so i created manually and i want to assign the <code>nextSlick</code> and <code>prevSlick</code>, but they are not working. WHY ?</p>
  
  <p><strong>UPDATE CONSOLE RESULT</strong>:<img src="https://i.stack.imgur.com/rHCV0.png" alt="enter image description here"></p>