Multiple Navigation Options with Slick Slider

January 02, 2019

Slick Slider is a great plugin for creating custom carousels on websites. It has a built in navigation option for the carousel as well: asNavFor.

I recently built a website that needed the two sets of navigation for one slider due to a large banner being used on the page. See below for more information.

Original Example:

 $('.slider-for').slick({ // slick slider
   slidesToShow: 1,
   slidesToScroll: 1,
   arrows: false,
   fade: true,
   asNavFor: '.slider-nav'
 });
 $('.slider-nav').slick({ // slick nav
   slidesToShow: 3,
   slidesToScroll: 1,
   asNavFor: '.slider-for',
   dots: true,
   focusOnSelect: true
 });

 $('a[data-slide]').click(function(e) { // additional nav
   e.preventDefault();
   var slideno = $(this).data('slide');
   $('.slider-nav').slick('slickGoTo', slideno - 1);
 });

Modifications:

// include a jump link to move down to the content 
jQuery('a[data-slide]').click(function(e) {
	//e.preventDefault();
	var slideno = jQuery(this).data('slide');
	jQuery('#meet_filter').slick('slickGoTo', slideno - 1);
});

Source.