jQuery Slick 轮播 slider 同步不起作用

Question

我正在尝试使用 Slick Carousel 制作一个带有 Logo 的轮播作为主 slider 的导航。我使用 Yeoman webapp 生成器使用 Bootstrap 和 Modernizr 创建样板。使用 Bower 安装了 Slick.js。

我使用默认的 Slick 设置进行 slider 同步。问题是 Slick 似乎忽略了导航部分中的 centerMode 和 focusOnClick 选项。现在它仅在单击导航点时有效。

我想要它做什么:

• 点击 Logo 应激活(显示)相应的幻灯片
• 当前事件 Logo 应位于中心位置

您可以看到它应该如何工作here在“ slider 同步”部分下。

我用 jQuery、Bootstrap 和 Slick 加载了一个 codepen:http://codepen.io/filiplaw/pen/ylhiB - 你可以看到那里的问题。代码如下:

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

问题已解决。结果我需要添加一些简单的 CSS 规则。您可以看到the answer on GitHub .

h1内容需要

display: inline-block;

光滑的幻灯片需要

text-align: center;