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); });