slick

slick-nav.js

        var $galleryContainer = $('.js-gallery'),
            $galleryNavConatiner = $('.js-gallery-nav'),
            $galleryNavItem = $('.js-gallery-nav__item');
        
        var $gallery = $galleryContainer.slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            fade: true
        });
        
        $galleryNavItem.on('click', function (e) {
            var t = $(this);
            $gallery.slick('slickGoTo', t.index());
            $galleryNavConatiner.find('.active').removeClass('active');
            t.addClass('active');
            
            e.preventDefault();
            e.stopPropagation();
            return false;
        });
        
        $gallery.on('setPosition', function (e, slick) {
            $galleryNavConatiner.find('.active').removeClass('active');
            $galleryNavItem.eq(slick.currentSlide).addClass('active')
        });