slickで「Slider Syncing」のslick-activeクラスが全てにつくバグを解消する

jQueryプラグインのslickはレスポンシブデザイン対応のカルーセルプラグインです。
タッチデバイスにも対応しており、簡単な記述で様々な機能を実装することができます。

この多機能な中の「Slider Syncing」というサムネイル画像でメインの表示を切り替えられる機能があるのですが、これの中で選択中の画像のみにつくはずの「slick-active」というクラスが、一番最初だけ全てについてしまうというバグがあり困りました。

色々検索したところ下記の記述で解消出来ました。

    $ ( '.slide_image' ) . slick ( {
        dots: false,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        centerMode: true,
        variableWidth: true,
        focusOnSelect: true,
        slidesToScroll: 1,
        arrows: false,
        asNavFor: '.slider-nav'
    } ) ;
    $ ( '.slider-nav' ) . slick ( {
        slidesToShow :  1 ,
        slidesToScroll :  1 ,
        asNavFor :  '.slide_image' ,
        dots :  false ,
        arrows: false,
        variableWidth: true,
        focusOnSelect :  true,
    } ) ;

    //remove active class from all thumbnail slides
    $('.slider-nav .slick-slide').removeClass('slick-active');

    //set active class to first thumbnail slides
    $('.slider-nav .slick-slide').eq(1).addClass('slick-active');

    // On before slide change match active thumbnail to current slide
    $('.slide_image').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
        var mySlideNumber = nextSlide;
        $('.slider-nav .slick-slide').removeClass('slick-active');
        $('.slider-nav .slick-slide').eq(mySlideNumber).addClass('slick-active');
    });