How to change dots in slick slider to images?

Question

css

Like these for example?

Answer 1

$('.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>

Answer 2

Just write your styles in the slick-theme.css file, there are all the styles for the slick-dots container. And different icons through nth-child