jQuery Slick carousel slider syncing not working

Question

I’m trying to make a carousel with logos as navigation for the main slider using Slick Carousel. I used Yeoman webapp generator to create a boilerplate with Bootstrap and Modernizr. Installed Slick.js with Bower.

I used the default Slick settings for slider syncing. The problem is Slick seems to ignore the centerMode as well as focusOnClick options in the navigation part. Right now it only works when clicking the navigation dots.

What I want it to do:

• clicking on a logo should activate (display) the corresponding slide
• the currently active logo should take the center position

You can see how it should work here under ‘Slider Syncing’ section.

I've made a codepen with jQuery, Bootstrap and Slick loaded: http://codepen.io/filiplaw/pen/ylhiB - you can see the problem there. Here's the code:

HTML:

<div class="container">
  <div class="slider-for">

    <div>
      <img class="img-responsive" src="http://placehold.it/960x540&text=1" alt="">
      <h4>
        Title
      </h4>
      <h6>
        <a href="#">
          link
        </a>
      </h6>
      <p>
        Description
      </p>
    </div>
    <div>
      <img class="img-responsive" src="http://placehold.it/960x540&text=2" alt="">
      <h4>
        Title
      </h4>
      <h6>
        <a href="#">
          link
        </a>
      </h6>
      <p>
        Description
      </p>
    </div>
    <div>
      <img class="img-responsive" src="http://placehold.it/960x540&text=3" alt="">
      <h4>
        Title
      </h4>
      <h6>
        <a href="#">
          link
        </a>
      </h6>
      <p>
        Description
      </p>
    </div>
    <div>
      <img class="img-responsive" src="http://placehold.it/960x540&text=4" alt="">
      <h4>
        Title
      </h4>
      <h6>
        <a href="#">
          link
        </a>
      </h6>
      <p>
        Description
      </p>
    </div>
    <div>
      <img class="img-responsive" src="http://placehold.it/960x540&text=5" alt="">
      <h4>
        Title
      </h4>
      <h6>
        <a href="#">
          link
        </a>
      </h6>
      <p>
        Description
      </p>
    </div>
  </div>
  <div class="slider-nav">

    <div>
      <img class="img-responsive" src="http://placehold.it/250x100&text=logo1" alt="">
    </div>
    <div>
      <img class="img-responsive" src="http://placehold.it/250x100&text=logo2" alt="">
    </div>
    <div>
      <img class="img-responsive" src="http://placehold.it/250x100&text=logo3" alt="">
    </div>
    <div>
      <img class="img-responsive" src="http://placehold.it/250x100&text=logo4" alt="">
    </div>
    <div>
      <img class="img-responsive" src="http://placehold.it/250x100&text=logo5" alt="">
    </div>
  </div>

</div>

JS:

$('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
});

$('.slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: true,
    centerMode: true,
    arrows: false,
    focusOnSelect: true
});

CSS:

.container {
  margin-bottom: 5%;
  margin-top: 5%;
}

.slider-for {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10%;
}

Answer 1

I also faced the same issue. The documentation on slick syncing is not good. The above solution didn't work for me. I resolved it doing the following:

Lets take the same html as asked in question.

 $('.slick-sync .slick-for').not('.slick-initialized').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      // rows: 0,
      arrows: false,
      fade: true,
      // asNavFor: '.slider-nav',
    });
    $('.slick-sync .slick-nav').not('.slick-initialized').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      // rows: 0,
      asNavFor: '.slick-for',
      dots: true,
      centerMode: true,
      focusOnSelect: true,
    });

NOTE: I have not used asNavFor: '.slider-nav' on the top slider. Because the bottom slider is used as navigation not the top slider. Slick version ---- 1.8.1

Answer 2

The issue is solved. Turns out I needed to add some simple CSS rules. You can see the answer on GitHub.

The h1 content needs

display: inline-block;

The slick-slide needs

text-align: center;