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%;
}

Solution

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;

Comments

[Christina]

This is a relatively new plugin, might want send a bug report. I tried it without Bootstrap's js and css and it still doesn't work. Can't see anything that you did wrong.

[Christina]

You should check which version of jquery. This is in the docs: code.jquery.com/jquery-migrate-1.2.1.min.js - so I think it's jquery 11 and this, which is odd.

[filiplaw]

I'm not sure which docs you mean, but I checked the dependencies and it seems to be OK. Slick needs jQuery 1.7+ and Bower installed jQuery v. 2.1.1. Where else can I check?

[Christina]

In the docs here: kenwheeler.github.io/slick way at the bottom

[Christina]

You're right. I used all your stuff here: jsbin.com/depavo/1/edit and it works great.

[filiplaw]

Turns out that focusOnClick not working is a confirmed bug. The workaround is to wrap the nav images in a <h1> tag (probably other tags would work as well, I haven't tried). Still, centerMode is not working. It's supposed to be displaying 3 slides, with the active one centered. Right now it seems to be aligning the images to the left. I will probably create an issue on GitHub, as this also looks like a bug.

[Christina]

Yep. OwlCarousel 2 is still in beta but for this particular feature it works well enough. Plus it has other features that this slider doesn't have.

[filiplaw]

Thanks, I'll try OwlCarousel 2.

[Christina]

Get the latest build, they keep improving it.