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张幻灯片:

<div class="mobileSubNav">
<ul class="mobile_nav_list">
<a href="#"><li><span class="mobile-icon"></span>landscaping</li></a>
<a href="#"><li><span class="mobile-icon"></span> grounds maintinence</li></a>
<a href="#"><li><span class="mobile-icon"></span> tree surgery</li></a>
<a href="#"><li><span class="mobile-icon"></span> fencing</li></a>
<a href="#"><li><span class="mobile-icon"></span> winter maintinence</li></a>
</ul>
</div>

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