I have a slider, I would like my function to return the same slider and navigation index to me when clicked. Currently it returns the index of the slider and the navigation shows 0 all the time. I would be grateful for any help.

var slider = $('.slider-for').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: true,
            fade: true,**strong text**
            appendArrows: $('.arrow-container'),
            prevArrow: '.prev-arrow',
            nextArrow: '.next-arrow',
          });

var navigation = $('.slider-nav').slick({
                slidesToShow: 10,
                slidesToScroll: 10,
                infinite: true,
                asNavFor: '.slider-for',
                dots: false,
                centerMode: false,
                focusOnSelect: true,
                arrows: false,
              });

$(".slick-arrow").click(function(){

var currentSlider = slider.slick('slickCurrentSlide');
console.log (currentSlider)


$(".slider-nav").slick("slickNext");
var currentNavigation = navigation.slick('slickCurrentSlide');

console.log (currentNavigation)
})