Skip to content

Instantly share code, notes, and snippets.

@dustinleer
Last active August 3, 2020 17:06
Show Gist options
  • Save dustinleer/1b8988b96d68a7799807515b0511db69 to your computer and use it in GitHub Desktop.
Save dustinleer/1b8988b96d68a7799807515b0511db69 to your computer and use it in GitHub Desktop.
Synced Slick Slider
$('.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');
});
@dustinleer
Copy link
Author

dustinleer commented Dec 12, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment