Ответы пользователя по тегу Slick
  • Как в slick сделать свою анимацию?

    Jakim
    @Jakim
    Laravel - developer
    Slick не поддерживает такие изощренные анимации, у него можно задать разное анимирование на сдвиг, ease-in ease-in-out и т.д.
    Для того что бы делать индивидуальные эффекты можно отлавливать событие смены слайда
    $('.you_tag_class').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    // здесь навешиваете разные анимации для своих элементов, группируете их по времени выполнения и в свою очередь делаете скорость анимации в слике с учетом всех ваших временных выполнений
        });
    
    $('.one-time').slick({
      speed: 300  // скорость анимации будет зависить от времени анимирования всех ваших блоков
    });
    Ответ написан
    Комментировать
  • Как поменять 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>
    Ответ написан
    Комментировать
  • Убрать замедление и ускорение slick slider?

    Jakim
    @Jakim
    Laravel - developer
    .slick({
            slidesToShow: 1, // толкьо 1 слайд показывать одновременно
            slidesToScroll: 1, // по 1-му слайду проскролливать
            speed: 8000, // медленная смена слайдов - скорость бегущей строки
            autoplay: true, // устанавливаем автозапуск слайдера
            autoplaySpeed: 0, //делаем запуск мгновенный с загрузкой страницы
            cssEase: 'linear', // делаем анимацию однотонной при смене слайда
        });
    Ответ написан
    Комментировать