How to do a double navigation slick.js?

How to do a double navigation slick.js?
7f4fa16f7f.jpg
Implemented like this:
The script that adds active classes for these sat-NAV
Scripts
$('.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');
 });


Scripts, to switch slides
Scripts
$('.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)));
 });


The crux of the issue is that I clicked on, for example, 5 slide in the second navigation, and the machine was a change of active slide in the first navigation
The same thing should happen when you click on one of the arrows navigation!
June 10th 19 at 14:35
1 answer
June 10th 19 at 14:37
what prevents to use the same class names and events on them? then at least 10 sliders you can use

Find more questions by tags LayoutjQueryCSSHTMLJavaScript