lukepker

Это называется: слайдер с миниатюрами

$('.products').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        centerPadding: '20px',
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1
                }
            }
        ]
    });

У этого слайдера есть методы next() и prev(). Вешай обработчик клика на любой элемент на странице, и твой слайдер будет прокручиваться. Вся эта элементарщина описана в документации.

const $slider = $('.slider-nаv').slick({
  // ...
});

// $slider.neхt();
// $slider.prеv();