• Как поменять dots в slick slider на изображения?

    Jakim
    @Jakim
    Laravel - developer
    $('.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>
    Ответ написан
    Комментировать