滑动条的静态导航

Question

我想向静态滑条添加静态导航。 目前，我正在使用两个单独的滑块，并将它们与参数asNavFor链接。

导航正常。但不幸的是，导航也随滑块一起滑动。我希望导航保持不变。

是asNavFor参数的正确选择，还是通过另一种方式链接到特定幻灯片并在导航中突出显示当前幻灯片。

这是HTML代码：

<div class="slider-nav">
    <div>Menu 1</div>
    <div>Menu 2</div>
    <div>Menu 3</div>
    <div>Menu 4</div>
    <div>Menu 5</div>
</div>

<div class="slider-for">
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
    <div>Slide 4</div>
    <div>Slide 5</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,
  focusOnSelect: true
});