Javascript 当一个页面上有多个转盘时，如何为每个滑动条创建自定义导航？

我有一个有两个旋转木马的页面。我正在使用slick slider插件，我需要创建单独针对每个旋转木马的自定义导航

我在努力想我该怎么做。此时，如果单击任何旋转木马的导航，则会更改所有旋转木马中的幻灯片

任何帮助都将不胜感激

这是演示-

JS

---

你可以像下面这样做

  $('.each-div').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    prevArrow: "<span class='slick-prev pull-left carousel-btns'><i class='fa fa-angle-left fa-3x' aria-hidden='true'></i></span>",
    nextArrow: "<span class='slick-next pull-right carousel-btns'><i class='fa fa-angle-right fa-3x' aria-hidden='true'></i></span>"
});

$（'.each div'）。光滑({
无限：是的，
幻灯片放映：3，
幻灯片滚动：1，
前箭头：“，
下一行：“
});

这是您的解决方案

$（'.test'）。每个（函数（idx，项）{
var carouselId=“carousel”+idx；
this.id=旋转木马；
美元（这个）({
幻灯片：“#”+旋转木马+”。选项“，
箭头：假
});
});
$（“.tabs li a”）。单击（函数（）{
var slideIndex=$（this.parent（）.index（）；
$（this.parent（）.parent（）.parent（）.slick（'slickGoTo'，parseInt（slideIndex））；
});
//});
.effect{
保证金：5px0；
高度：70像素；
宽度：320px；
文本对齐：居中；
}
.选择权{
边框：1px纯灰；
高度：50px；
宽度：150px；
背景：#eee；
}
.prev_下一个{显示：内联块；宽度：80px；文本对齐：中心；边距：2px；边框：0；填充：4px；背景色：#666；颜色：#fff；}

测试1

测试1-







测试2

测试2-







测试3

测试3-







经过长时间的搜索，我找到了一个简单的解决方案，可以在包装器中找到滑块导航

$('.slider-wrap').each(function (index, sliderWrap) {
    var $slider = $(sliderWrap).find('.slider');
    var $next = $(sliderWrap).find('.next');
  var $prev = $(sliderWrap).find('.prev');
    $slider.slick({
        dots: true,
      slidesToShow: 2.5,
        nextArrow: $next,
      prevArrow: $prev
    });
});

Noah Rodenbeek的钢笔：
嘿，谢谢你的回答，我唯一的问题是我需要每个导航的文本不同。我已经更新了演示，所以你可以看到。你知道我该怎么做吗？谢谢你的回答！因此，
$（this）.parent（）.parent（）.parent（）.slick
是什么将相应的滑块指向单击的导航？有没有更简短的书写方式？@user2498890。。给我一个时间，我会回来提供一个替代解决方案这是一个更好的解决方案吗<代码>$（this.parents（）.eq（2）.slick（'slickGoTo'，parseInt（slideIndex））@user2498890。。。这是另一个解决方案。。使用jquery method closest（）代替遍历。我认为这两种方法都有效，但感谢您的帮助，我对我的目标感到困惑。
$('.slider-wrap').each(function (index, sliderWrap) {
    var $slider = $(sliderWrap).find('.slider');
    var $next = $(sliderWrap).find('.next');
  var $prev = $(sliderWrap).find('.prev');
    $slider.slick({
        dots: true,
      slidesToShow: 2.5,
        nextArrow: $next,
      prevArrow: $prev
    });
});