Synced Slick Slider

synced-slick.js

$('.slick-nav.sync').slick({
	slidesToShow: 7,
	slidesToScroll: 1,
	asNavFor: '.slick-slider.sync',
	dots: false,
	arrows: false,
	fade: false,
	centerMode: false,
	// centerPadding: '50px',
	focusOnSelect: true,
	infinite: true,
}).on('init', function (event, slick) {
	$('.slick-nav.sync .slick-slide[data-slick-index="0"]').addClass('is-active');
});

$('.slick-slider.sync').slick({
	infinite: true,
	autoplay: false,
	adaptiveHeight: false,
	speed: 600,
	fade: false,
	cssEase: 'linear',
	rtl: false, //right to left
	accessibility: true,
	arrows: true,
	dots: false,
	pauseOnFocus: true,
	pauseOnHover: true,
	swipe: true,
	focusOnSelect: false,
	draggable: false,
	slidesToShow: 1,
	slidesToScroll: 1,
	asNavFor: '.slick-nav.sync',
	useTransform: true,
	prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left"></i> Previous</button>',
	nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right"></i> Next</button>',
}).on('setPosition', function (event, slick) {
	slick.$slides.css('height', slick.$slideTrack.height() + 'px');
}).on('afterChange', function (event, slick, currentSlide) {
	$('.slick-nav.sync').slick('slickGoTo', currentSlide);
	var currrentNavSlideElem = '.slick-nav.sync .slick-slide[data-slick-index="' + currentSlide + '"]';
	$('.slick-nav.sync .slick-slide.is-active').removeClass('is-active');
	$(currrentNavSlideElem).addClass('is-active');
});

This builds out a synced Slick Slider, which needs to detect the first element in the synced nav so there can be a class added so custom CSS can be written for the active nav element. Had to build this because all the visible slick nav elements in a synced nav are set to active by default and I didn't want it centered.