<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>

So I am wanting to sue this list to control the 5 slides:

<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>

So I am using the slick.js plugin for my slider (never really used it before but thought I would give it a try!)

So anyway, I am wanting to use a custom set of

            <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>

So I am wanting to sue this list to control the 5 slides:

<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>

• javascript
• slick.js

1 Answer 1

You'll need to use the slickGoTo method.

Example: http://jsfiddle/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();
});