Javascript 滑动滑块多个滑块保持活动位置

我在一个页面上有多个光滑的滑块。每个滑块都有一个缩略图导航。问题是滑块在当前位置使用前一个滑块，而不是从第一个缩略图开始

我想我需要一种动态添加id的方法，这样它们就不会相互影响。（我的JS知识非常基础）

$（“.slider产品”）.slick({
幻灯片放映：1，
幻灯片滚动：1，
箭头：错，
是的，
asNavFor:“.滑块导航”
});
var windowWidth=$（window.width（）；
如果（窗宽）
用于绕过所有滑块
按为每对滑块添加编号的类
用于根据屏幕宽度更改设置
请检查结果：


var numSlick=0；
$（'.slider products'）。每个（函数（）{
numSlick++；
$（this）.addClass（'slider-'+numSlick）.slick({
箭头：错，
asNavFor:'.slider导航滑块-'+numSlick，
是的，
幻灯片滚动：1，
幻灯片放映：1，
});
});
numSlick=0；
$（'.slider nav'）。每个（函数（）{
numSlick++；
$（this）.addClass（'slider-'+numSlick）.slick({
阿罗：错，
asNavFor:'.slider products.slider-'+numSlick，
焦点选择：正确，
幻灯片滚动：1，
幻灯片放映：4，
响应：[
{
断点：800，
设置：{
幻灯片放映：3，
}
}
]
});
})；
。光滑箭头{
display:none！important；/*`arrows:false；`不足以阻止水平滚动*/
}
.滑滑梯{
背景：#c69；
边框：2倍实心#fff；
颜色：#fff；
字体大小：36px；
字体大小：粗体；
轮廓：无；/*防止出现微小的灰色轮廓*/
填充：18px0；
文本对齐：居中；
}
.slider:n个类型（n+3）。平滑幻灯片{背景：#9c6；}
.slider:n个类型（n+5）。平滑幻灯片{背景：#69c；}
.滑块导航{
边缘底部：12px；
}
.滑块导航.平滑滑块：悬停{
光标：指针；
不透明度：.7；
}

12345
12345
12345
12345
12345
12345
您能将您的代码示例转换为可运行的代码段吗？这将帮助我们找到您问题的解决方案。
  $('.slider-products').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   arrows: false,
   fade: true,
   asNavFor: '.slider-nav'
  });


  var windowWidth = $(window).width();
  if(windowWidth <= 800) {
    $('.slider-nav').slick({
    vertical: false,
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: '.slider-products',
    arrow: false,
    focusOnSelect: true
   });
 } 
 else {
   $('.slider-nav').slick({
   vertical: true,
   slidesToShow: 3,
   slidesToScroll: 1,
   asNavFor: '.slider-products',
   focusOnSelect: true
 });
}