javascript - Slick.js 使用链接作为控件

Question

所以我正在为我的 slider 使用 slick.js 插件(以前从未真正使用过它，但我想我会试一试!)

所以无论如何，我想使用一组自定义的

标签作为我的控件，这些标签永远不会改变，并且与 slider 中的链接关联的图像也永远不会改变。

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