Slick Slider некорректно работает когда мало слайдов

Хочу реализовать Slider Syncing. Слайдер работает корректно, если количество слайдов будет больше или равно, чем значение slidesToShow для класса .slider-nav (то есть для 5 и более). Если фотографий меньше 5, то при прокрутке фотографий из .slider-nav, они уезжают. Добавление .slick-track { transform: none!important; } решает эту проблему, но тогда слайдер не работает , когда слайдов больше 5. Как исправить?

<div class="slider-wrap">
     <div class="slider-for">
         <div><img class="slider-for_img" src="/img/1814.jpg" alt=""></div>                         
         <div><img class="slider-for_img" src="/img/chess.jpg" alt=""></div>                         
         <div><img class="slider-for_img" src="/img/blue_chess.jpg" alt=""></div>
     </div>
     <div class="slider-nav">
         <div><img class="slider-nav_img" src="/img/1814.jpg" alt=""></div>  
         <div><img class="slider-nav_img" src="../../img/chess.jpg" alt=""></div>  
         <div><img class="slider-nav_img" src="../../img/blue_chess.jpg" alt=""></div> 
    </div>
 </div>



$('.slider-for').slick({
          slidesToShow: 1,
          slidesToScroll: 1,    
          prevArrow: '<button type="button" class="slick-prev"> <img src="/icons/left.svg" alt="slide"></button>',
          nextArrow: '<button type="button" class="slick-next"><img src="/icons/right.svg" alt="slide"></button>',
          fade: true,
          asNavFor: '.slider-nav'
        });

    $('.slider-nav').slick({
      slidesToShow: 5,
      slidesToScroll: 1,
      asNavFor: '.slider-for',
      dots: true,
      infinite: true,
      arrows: false,
      focusOnSelect: true
    });