使用slick.js库创建可变宽度轮播问题

Question

这是js小提琴：http://jsfiddle.net/N6wfG/92/。

这是我的js代码：

$(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();
    });
});

这是html部分：

<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<div class="slider variable-width" id ="slide-custom">
    <div style="width:500px; height:100px;border:1px solid black;">1</div>
    <div style="width:600px; height:100px;border:1px solid black;">2</div>
    <div style="width:200px; height:100px;border:1px solid black;">3</div>
     <div style="width:600px; height:100px;border:1px solid black;">4</div>
    <div style="width:400px; height:100px;border:1px solid black;">5</div>
    <div style="width:700px; height:100px;border:1px solid black;">6</div>
</div>
<button class="prev-slide">prev</button>
<button class="next-slide" >next</button>

正如你在小提琴中看到的那样，由于某种原因生成了next和prev按钮，在我的网站中没有。所以我手动创建，我想分配nextSlick和prevSlick，但它们不起作用。为什么？

更新控制台结果：