Javascript 滑动导航的光滑旋转箭头

您好，我正在尝试为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>

测试1
测试2
测试3

为了澄清，当我在Slick网站上查看滑块同步示例时，我看到按钮的生成标记，但我自己的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>

上一个
下一个

如果我已经可以评论的话，我会评论这个。在我看来，你误解了给出的例子。很明显，您正在尝试“滑块同步”中的示例，正如您所注意到的，“滑块导航”上有箭头，但“滑块同步”上没有箭头

至于解决方案，我建议您添加

arrows: false,

到

$（'.slider nav'）.slick

函数调用

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

---

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

这是因为存在显示箭头的条件，并且它是正确的

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

在哪里,

slideCount

-本例中幻灯片或

元素的总数

slidesToShow

-在slick设置/选项中传递属性

因此，在您的情况下，

slideCount

是

3

（div

slider nav

）中的总幻灯片/子div）和

slidesToShow

是

3

，这不符合上述条件

因此，要显示箭头，请添加更多的

div

或减小

slidesToShow

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

这里有一个