javascript - 用于 slider 导航的光滑轮播箭头

Question

您好，我正在尝试使用 Slick 的 slider 同步选项，但无法弄清楚上一个/下一个箭头如何显示在轮播的 slider 导航部分中。我按照包含 js 和 css 文件的步骤操作，并在 slider 同步示例中复制了 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 网站上的 slider 同步示例时，我看到了为按钮生成的标记，但没有看到我自己的 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 内的总幻灯片/子 div slider-nav )和 slidesToShow是 3 ，不满足上述条件。

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

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

这是一个JSfiddle