Как добавить класс Slick-Current в Slider-Nav в Slick Slider

Question

Я пытался создать собственный слайдер с Slick Slider для моего сайта Wordpress. Мой код работает нормально, но теперь у меня есть проблема с ползунком, он только добавляет Slick-Current к моей первой навигации. Это мой код:

HTML КОД:

<div class="slider">
    <div class="slide">
        <div class="content_box">
            <h1>Title 01</h1>
        </div>
    </div>
    <div class="slide">
        <div class="content_box">
            <h1>Title 02</h1>
        </div>
    </div>
    <div class="slide">
        <div class="content_box">
            <h1>Title 03</h1>
        </div>
    </div>
</div>
<div class="slider-nav">
    <div>
        <div class="thumb_content">
            <h2>Thumb - title 01</h2>
        </div>
    </div>
    <div>
        <div class="thumb_content">
            <h2>Thumb - title 02</h2>
        </div>
    </div>
    <div>
        <div class="thumb_content">
            <h2>Thumb - title 03</h2>
        </div>
    </div>
</div>

Код скользящего слайдера:

<script>
    $('.slider').slick({
        arrows:true, dots: false, infinite:true, speed:500,
        autoplay:true, autoplaySpeed: 3000, slidesToShow:1, slidesToScroll:1
    });
    $('.slider-nav > div').click(function() {
        $('.slider').slick('slickGoTo',$(this).index());
    });
    $('.slider-nav').slick({
      slidesToShow: 3, slidesToScroll: 1,
      asNavFor: '.slider', dots: true,
      centerMode: true, focusOnSelect: true
    });
</script>

ОБНОВЛЕНИЕ: Добавьте приведенный ниже код, и это будет здорово

var slides = $(".slider .slick-track > .slick-slide").length;
$('.slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
  var inFocus = $('.slider .slick-current').attr('data-slick-index');
  $('.slider-nav .slick-current').removeClass('slick-current');
  $('.slider-nav .slick-slide[data-slick-index="' + inFocus + '"]').addClass('slick-current');
});