Slick.js使用链接作为控件

Question

因此，我使用slick.js插件作为我的滑块(从来没有真正使用过它，但我认为我会尝试！)

因此，无论如何，我想使用一个自定义的

• 标签作为我的控件，这些永远不会改变，与滑块中的链接相关的图像也不会改变。 <script type="text/javascript"> $(function () { var $panel = $('<div class="panel">13</div>'); var slickOpts = { slidesToShow: 1, slidesToScroll: 1, dots: false, fade: true, autoplay: true, prevArrow: '.btn-prev', nextArrow: '.btn-next' }; // Init the slick $('#dashboard').slick(slickOpts); var slickEnabled = false; }); </script> <div id="dashboard"> <div class="panel">1</div> <div class="panel">2</div> <div class="panel">3</div> <div class="panel">5</div> </div> 所以我想用这个列表来控制这5张幻灯片：

Answer 1

您需要使用slickGoTo方法。

示例：http://jsfiddle.net/j7tua7rL/

HTML

<section class="slider">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
    <div>slide5</div>
    <div>slide6</div>
</section>

<ul class="links">
    <li><a href="#">Slide 1</a></li>
    <li><a href="#">Slide 2</a></li>
    <li><a href="#">Slide 3</a></li>
    <li><a href="#">Slide 4</a></li>
    <li><a href="#">Slide 5</a></li>
    <li><a href="#">Slide 6</a></li>
</ul>

JS

var $slideshow = $(".slider").slick();

$('.links').on('click', 'a', function( e ) {

    var slideIndex = $(this).closest('li').index();

    $slideshow.slick( 'slickGoTo', parseInt( slideIndex ) );

    e.preventDefault();
});