$('.images').slick({ // это изначально slick слайдер для основного блока изображений
slidesToShow: 1, // по одному слайдеру
slidesToScroll: 1, // по одному менять
arrows:true, // включение стрелок (если не нужны false)
asNavFor: '.imagesnew_dotted' // указываем что навигация для слайдера будет отдельно (указываем класс куда вешаем навигацию)
});
$('.imagesnew_dotted').slick({ // настройка навигации
slidesToShow: 3, // указываем что нужно показывать 3 навигационных изображения
asNavFor: '.images', // указываем что это навигация для блока выше
focusOnSelect: true // указываем что бы слайделось по клику
});
<!-- Собственно блок где будут основные изображения -->
<div class="images">
<div><img src="image/data/big_img_1.jpg" alt=""></div>
<div><img src="image/data/big_img_2.jpg" alt=""></div>
<div><img src="image/data/big_img_3.jpg" alt=""></div>
</div>
<!-- Навигация для вышеупомянутого слайдера -->
<div class="imagesnew_dotted" style="transform: none !important;"> // обязательно в css запретите трансформацию, а то будут иконки ездить в зависимости от номера слайда
<img class="active" src="image/data/icon_img_1.jpg">
<img src="image/data/icon_img_2jpg">
<img src="image/data/icon_img_3.jpg">
</div>