Question

您好我正在尝试使用Slick的滑块同步选项，但无法弄清旋转/下一个箭头如何显示在轮播的滑块导航部分中。我按照包含js和css文件的步骤进行操作，并在滑块同步示例中复制了javascript：

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

对于我的HTML，我有以下内容：

<div class="slider-for">
  <div>
      test 1
  </div>
  <div>
      test 2
  </div>
  <div>
      test 3
  </div>
</div>
<div class="slider-nav">
  <div>
    <img src="images/carousel-thumbnails/thumbnail-1.jpg" alt=""/>
  </div>
  <div>
    <img src="images/carousel-thumbnails/thumbnail-2.jpg" alt=""/>
  </div>
  <div>
    <img src="images/carousel-thumbnails/thumbnail-3.jpg" alt=""/>
  </div>
</div>

为了澄清一下，当我检查Slick网站上的滑块同步示例时，我看到生成的按钮标记，但不是我自己的光滑转盘：

<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="display: block;">Previous</button>

<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;">Next</button>

Answer 1

这是因为有条件显示箭头，它是

 if( _.slideCount > _.options.slidesToShow )

其中，

slideCount - 此案例中幻灯片或<div>元素总数

slidesToShow - 在光滑的设置/选项中传递的属性

因此，在您的情况下，slideCount为3（div slider-nav内的总幻灯片/子div）和slidesToShow为3，这不是'{1}}达到上述条件。

因此，要显示箭头，请添加更多divs或减少slidesToShow

的值

$('.slider-nav').slick({
  slidesToShow: 2, /* reduce this number */
  slideToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

这是JSfiddle

Answer 2

如果我已经发表评论，我会对此发表评论。在我看来，你误解了给出的例子。您正在尝试“滑块同步”中的示例，您可以注意到，“slider-nav”上有箭头但“slider-for”上没有箭头。

至于解决方案会建议你添加

arrows: false,

到$('.slider-nav').slick函数调用

Answer 3

 $('.slider-for').slick({
  ..  
   arrows: false, // use true or remove it
  ..
});

不要使用箭头false，它会删除滑块箭头。

滑块导航的光滑旋转木马箭头

3 个答案: