jQuery slick 두개 슬라이더 연동

<script>
$('.main-s').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    dots: true,
    asNavFor: '.slick-c'
  }).on("beforeChange", function (e, slick, current, next) {
    console.log($('.slick-dots.dots li'))
    $('.slick-dots.dots li').removeClass('on');
    $('.slick-dots.dots li').eq(next).addClass('on');
  })
  $('.slick-c').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    asNavFor: '.main-s',
    dots: false,
    arrows: false,
    fade: true,
    centerMode: true,
    focusOnSelect: true
  });
  $('.slick-dots.dots li').on('click', function () {
    let idx = $(this).index();
    $('.main-s').slick('slickGoTo', idx);
    $('.slick-dots li').removeClass('on');
    $(this).addClass('on');
  })
</script>

$('.main-s').slick('slickGoTo', idx);
slickGoTo : 위에서 지정한 dots를 클릭했을때 해당 순서의 main-s의 슬라이드로 이동