Как сделать двойную навигацию в slick.js?

Реализовал вот так:
Скрипты, добавляющие активные классы для этих навигаций
Скрипты
$('.benefits-site__nav-item:first').addClass('active');
$('.benefits-site__nav-item').click(function(){
$('.benefits-site__nav-item').removeClass('active');
$(this).toggleClass('active');
});
$('.benefits-site__right-nav li:first').addClass('active');
$('.benefits-site__right-nav li').click(function(){
$('.benefits-site__right-nav li').removeClass('active');
$(this).toggleClass('active');
});
Скрипты, для переключения слайдов
Скрипты
$('.benefits-site__nav > div').click(function(e){
e.preventDefault();
slideIndex = $(this).index();
$('.benefits-site__item-slider').slick('slickGoTo', (parseInt(slideIndex)));
});
$('.benefits-site__right-nav li').click(function(e){
e.preventDefault();
slideIndex = $(this).index();
$('.benefits-site__item-slider').slick('slickGoTo', (parseInt(slideIndex)));
});
Суть вопроса в том, чтобы я кликнул, например, на 5 слайд во второй навигации, и, автоматом произошла смена активного слайда в первой навигации
То же самое должно происходить при клике на одну из стрелок навигации!