Question

我正在尝试使用Slick Carousel制作带有徽标的旋转木马作为主滑块的导航。我使用Yeoman webapp生成器创建了一个带有Bootstrap和Modernizr的样板。用Bower安装了Slick.js。

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

我想要它做什么：

点击徽标应激活（显示）相应的幻灯片
当前有效的徽标应采取中心位置

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

我已经用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;

jQuery Slick轮播滑块同步不起作用

1 个答案: