Slick Slit
💣 👉🏻👉🏻👉🏻 ALL INFORMATION CLICK HERE 👈🏻👈🏻👈🏻
Slick slider — это jQuery плагин для быстрого создания на сайте адаптивного слайдера любой сложности. Его функционал позволяет реализовать зацикливание, автопроигрывание, эффекты перехода и многое другое. Отдельно выделю возможность пролистывания слайдера пальцем на устройствах с сенсорным экраном.
Подключение осуществляется следующим образом.
Подготавливаем разметку. Для этого каждый слайд оборачиваем в «div», внутри которого будет какое-то содержимое:
Рассмотрим примеры вызова «Slick slider» с разными настройками.
При вызвове без параметров получим один активный слайд с навигационными стрелками.
Отобразим 3 слайда с параметрами зацикленной прокрутки (infinite), отображением навигационных точек (dots) и количеством прокручиваемых за раз слайдов (slidesToScroll).
В режиме центрирования активный слайд устанавливается по центру с классом «slick-center».
Если на сайте адаптивная верстка, то слайдер можно подстроить под ширину экрана. Для этого используйте свойство «responsive». Оно позволяет установить для разных разрешений индивидуальные настройки. Рассмотрим пример.
Здесь по умолчанию устанавливается отображение в ряд 3 слайда. Если ширина видимой области браузера от 768 до 481 пикселя — 2. И один, если ширина менее 480 пикселей.
В настройках адаптивности можно задавать любые параметры. Например, на мобильной версии сайта можно отключить стрелки навигации.
В таблице приведены основные настройки. Полный перечень на сайте разработчика.
Включает адаптирование высоты для одиночкного слайда горизонтальной карусели
Скорость автопрокрутки в милисекундах
Показ/скрытие навигационных точек под слайдером
Включает/выключает способность перелистывания слайдера перетаскиванием мышью
Эффект затухания при перелистывании слайдов
Устанавливает фокус на выбранный элемент карусели при клике
Анимационные эффекты перехода, их набор зависит от подключенных jQuery Easing плагинов
Сопротивление при попытки прокрутить карусель, когда дальше нет слайдов и она не зацилена
Бесконечное прокручивание (зацикливание)
Номер слайда, с которого начинать показ
Тип подгрузки слайдов. Принимает 'ondemand' или 'progressive'
Пауза автопроигрывания при наведении мыши
Пауза автопроигрывания при наведении мыши на навигационные точки
Пауза автопроигрывания при наведении мыши
Может быть 'window', 'slider' или 'min'
Методы — это функции, которые могут совершить со слайдером какие-то действия или сообщать о его текущем состоянии. Метод можно вызывать в любом JS обработчике, например, при нажатии на кнопку.
slickCurrentSlide — возвращает номер текущего слайда. Отсчёт ведётся с нуля.
slickGoTo — переходит к слайду с указанным номером.
slickNext — прокручивает на один слайд вперёд.
slickPrev — прокручивает на один слайд назад.
slickPause — останавливает автоматическую прокрутку.
slickPlay — запускает автоматическую прокрутку.
События позволяют реагировать на определенные действия. Например, после прокрутки к 5 слайду выведем сообщение. Для этого включаем обработчик события «afterChange».
«beforeChange» срабатывает перед переходом к другому слайду:
Когда планируется закончить перевод? И хотелось бы еще примеры с пояснениями.
Точно не знаю, на выходных возможно добавлю больше примеров. А так можно брать всё из англоязычного источника.
И в чем смысл переводить? Ожидалось изменение дизайна слайдера
Дизайн слайдера каждый подстраивает под свой сайт, всем не угодишь.
А как можно сделать что бы можно было копировать текст со слайдов?
отключить возможность перелистывания слайдера мышью, то есть параметр draggable установить в false
как добавить еще дополнительные 2 кнопки вперед назад?
Верстаешь кнопки, создаёшь для них jquery обработчики для листания
а можно по подробней пример скинуть кода? я в JQuery не очень
Подробно некогда объяснять, как-то так:
$('.btn-next').on('click',function(){ $('#slick').slick('slickNext'); });
$('.btn-prev').on('click',function(){ $('#slick').slick('slickPrev'); });
Скажите а как вместо навигации (кнопок) сделать текст (ссылки) например Блок1 Блок2 Блок3 итд
Убирай точки, верстай под слайдером ссылки и вешай на них jQuery обработчики onClick. При нажатии на ссылку чтобы выполнялся код перехода к нужному слайду. За переход к нужному слайду в slick отвечает метод slickGoTo. Типа перейти к определенному слайду:
$('.your-element').slickGoTo(5);
Подскажите, пожалуйста, есть ли в данном плагине возможно прокручивать слайды в случайном порядке + 1й слайд также всегда выводит рандомный?
Кажется нет, для этого надо самому при помощи php скрипта или ещё каких-то инструментов перемешивать слайды и затем их выводить.
Здравствуйте! А как при клике с первого на третий слайд не показывать второй? Если используется обычная анимация ( не fade)
Не понял как это. Удали просто второй слайд, если его показ не нужен.
Его показ нужен, работает autoplay и все слайды показываются по очереди. Но как быть если пользователь принудительно нажимая на дотс переключает с первого сразу на третий. Как в этом случае пропускать второй?
Я понял, не вижу таких возможностей. Если только писать какие-то свои jquery обработчики для нажания на дотс.
Ну да, как вариант — использовать другой слайдер.
Добрый день, если слайдер находиться в табе который изначально скрыт. Как дописать событие что бы при клике на вкладку таба слайдер пере инициализировался. Сейчас когда клацаешь на таб слайдер валиться. Заранее спасибо! Если можно какой нибудь пример при клике как инициализировать его заного.
У него нет переинициализации. Как вариант, при клике можно просто ещё раз выполнить его код. Но вообще, раз он валится, значит дочернему скрытому полю не задана фиксированая ширина. Что-то с вёрсткой.
Сам долго мучался с этой проблемой, но наконец нашел решение. там проблема не в слайдере, а в самих табах бутстрапа.
Вот решение https://newwebmaster.ru/2016/06/slick-in-bootstrap-tabs-and-equal-height.html
не нашел, можно ли не прокручивать слайдер по кругу? и будут ли при этом кнопки доходя до начала\конца дизейблится?
Параметр infinite: false, кнопки просто не будут дальше прокручивать.
Всем привет! делаю все как по инструкции а слайдер не запускается, только дивы выводятся с 1 до 6, пишет что не удалось загрузить jquery 1.11.1
Значит Вы пытаетесь его загрузить от туда, где его нет. Используйте код из примера, я проверил, по предоставленной ссылке корректно грузится jquery-1.11.0.min.js
Привет! Подскажите пожалуйста. Есть такой слайдер http://joxi.ru/l2ZNglxS81Ydq2
Большой слайдер с 1й картинкой вверху и ниже маленький слайдер с 5ю картинками и ниже dots с привязкой к нижнему слайдеру. При клике на нижнем слайдере на слайд, у нас на верхнем слайдере выводится эта картинка в большом разрешении, dots(кружочек ниже) становится белым, т.к. стал активным другой слайд. При листании стрелочками большого слайдера, в нижнем слайдере меняется белая окантовка(активный слайд) и dots(белый кружочек)
Заранее спасибо!
Я не понял — что не так. Судя по описанию все работает логично. В чём проблема?
забыл сам вопрос задать)) как мне всё это друг с другом связать? если б был вверху слайдер и просто внизу, проблем бы небыло. А так ещё эти кружочки и активный слайй…
Есть такой параметр у slick — asNavFor, с помощью него можно связать два слайдера. В этом параметре указывается идентификатор другого слайдера, то есть при вызове slick у обоих слайдеров добавить asNavFor: '.slider-2' и asNavFor: '.slider-1'.
Это да… а как быть с кружочками? Что б на каждый слайд был свой кружочек? И что б у активного слайда была обводка?
Не знаю если честно, это надо смотреть, можно ли стилями оформить, если нет, возможно, самому придется на js что-то дописывать.
а вот ты писал, что есть такой метод
$('.your-element').slickGoTo(5);
Если его применить на кружочки сверстанные и на нижний слайдер. Только я не понял как этот скрипт применить. Подскажешь?
Это метод, который позволяет перейти к определённому слайду. Нужно, повесить обработчик на событие setPosition обоих слайдеров и в них использовать метод slickCurrentSlide чтобы узнать ID слайда текущего слайдера и присвоить его второму слайдеру через slickGoTo. Скрипт не напишу, так как это надо всё пробовать на боевом примере, нет на это времени.
Можно как то сверстать dots в слик слайдере? Стрелки влево\вправо верстал, а dots как не подскажете?
http://joxi.ru/DmBNMzZSNDoL8m
Стили все можно редактировать. Если нужно для каждой точки свой стиль, то можно через CSS псевдокласс nth-child() это сделать. Может и другие способы есть, не знаю.
можно. вчера такое сделал. просто переопредели стандартный класс слайдера
Можно ли отключить зацикливание но при это сохранить автопрокрутку? когда делаю infinite:false и autoplay:true то зацикливание все равно остается. можно ли как то это решить?
Автопрокрутка будет, но до последнего слайда, затем остановится. Сделать можно, но придётся писать свой js код, смотри событие beforeChange.
Как исправить дёргание в slickslider? Есть проект arcticdog.ru, чуть ниже есть вертикальный слайдер joxi.ru/52akLvBSG56Vkr. При перелистывании слайда, нас автоматически тянет вверх экрана или вниз. Не знаешь как это можно исправить?
Не знаю. Найдёшь как, отпиши… может кому пригодится решение.
Подскажите, пожалуйста. А можно сделать так, чтобы слайды шли не по кругу, а туда сюда?
Здравствуйте, подскажите пожалуйста, я сделал слайдер вертикальным, как можно сделать, чтобы слайды выезжали только сверху.Или при нажатии вниз они выезжали сверху, а при нажатии вверх, они выезжали снизу?
наверно, параметр vertical:true, других вариантов не знаю
Привет. Подскажите есть вариант сделать различные эфекты перехода между слайдами? Кроме стандартного и fade?
Привет! Подскажите пожалуйста, как изменить кнопки (вперед/назад) при окончании слайдера? т.е. у каждой кнопки есть 2 картинки (активная красная и неактивная-серая) как при дохождении до последнего слайда кнопку поменять с активной на неактивную?
Привет… настройка infinite: false запрещает циклическое прокручивание. Если кнопки стандратные, то они автоматически станут неактивными и некликабельными. Если нестандартные, то можно переоформить с помощью стилей. При крайних положениях соответствющим кнопкам добавляется класс slick-disabled.
добрый день!
имеется слайдер, сделал его вертикальным через vertical:true, подскажите пожалуйста, можно ли как-то динамически изменять это значение на false?
а то в моб версии он снова горизонтальный, спасибо
Динамически изменять нельзя. И не понятно, как в мобильной версии он мог стать горизонтальным. Эта настройка не зависит от расширения экрана. Может с вёрсткой что-то не так.
Динамически можно изменять с помощью берэйкпоинтов
responsive: [
{
breakpoint: 900,
settings: {
slidesToShow: 4,
vertical:true,
}
}
Точно, забыл что есть такая возможность.
Добрый день, подскажите пожалуйста, как в слайдере сделать динамическое добавление слайдов. вот как на этом сайте в галерее:http://simonna-wedding.com.ua/portfolio-container «Счастье, которое мы подарили». На десктопе в одном слайде 2 колонки-правая с большой фото, левая — с двумя маленькими. На планшете левая колонка (с маленькими фото) как-то становится отдельным слайдом. А на мобильных — вообще каждая фото — это отдельный слайд.
Добрый… это к настройкам слайдера не относится. Для этого необходима адаптивная вёрстка содержимого слайдов. То есть Вам для решения этой задачи нужно искать верстальщика.
День добрый! Подскажите пожалуйста как создать два слайдера на одной странице?
Ну я понимаю что в JS все «объект», а как создать второй слайдер не пойму(
Заранее спасибо!
Добрый день. Создаёте на странице разметку для двух слайдеров, указываете им только разные классы и в js коде два раза для каждого прописываете инициализацию слайдера:
$('.slider-one').slick();
$('.slider-two').slick();
В скобках для каждого слайдера уже можно указывать свои индивидуальные параметры.
Добрый день!
Как сделать прокрутку «вверх» до якоря по нажатию на элемент dots? Рисую слайдер 3х3, навигация внизу, надо чтобы когда осуществлялся переход на новый слайд, срабатывало событие ScrollToTop.
Не понял как это, слайдер 3 на 3. Отследить переход на новый слайд можно так:
$('#slick-slider').on('afterChange', function(event, slick, currentSlide){
// тут переход куда-то наверх
});
как перейти именно к якорю, не знаю. Нужно что-то придумывать.
Спасибо, с этим разобралась. Есть ещё одна проблема:
Подскажите почему не срабатывают вкладки jsfiddle.net/xv1ogzkt при переключении? Если row 1, то норм, если больше начинает падать.
Не смогу подсказать. Возможно, несовместимы параметры.
Добрый день. Подскажите плиз, если я ставлю slidesToShow: 4, slidesToScroll: 1 и при этом у меня количество слайдов меньше 4, то клонирования не происходит. Так бывает если например у меня блок просмотренных товаров повешен на слайдер, а пользователь просмотрел 1, 2 товара. Пусть они даже не будут клонироваться, но как сделать чтоб они центрировались? Спасибо!
Ну я думаю, уже что-то придумал сам. У меня при таких параметрах слайдер вообще не листается. Ну а центрировать можно параметром: centerMode: true
Здравствуйте.
Не подскажите, можно ли сделать так, чтоб при нажатии на кнопки (стрелки) проматывался 1 слайд, а во время автопрокрутки — 2 слайда?
Просто настройками вроде нельзя. Только писать свои обработчики на нажатие кнопок на jquery. Типа:
$('#slick-slider .slick-next').on('click',function(e){
e.preventDefault();
$('#slick-slider').slick('slickNext');
return;
});
Но не испытывал, может где-то ошибка.
Здравствуйте, не подскажите как сделать чтобы при уменьшении окна браузера размер фоток в карусели не сжимался по горизонтали и не превращался в сплющенные фото как здесь http://dialtour.ru/assets/libs/lightbox2-master/examples/slick-1.6.0/index1.html
а вел себя как здесь: фото сходятся, но остаются в первоначальном размере. В конце начинают изменять ширину окна, но без искажения самих пропорций фотографий https://tezeks.com/avstriya/vena/peshehodnaya-ekskursiya-po-vene
Видимо какие-то скрипты навешаны, точно не скажу. При изменении размера окна всё сильно тормозит. Обычно адаптивность в slick делают через параметр breakpoint, где можно уменьшать кол-во выводимых слайдов при конкретном разрешении. Тут про это писали — https://realadmin.ru/saytostroy/slick-slider.html#comment-1175
спасибо. Ещё такой вопрос. Как скрыть стрелки в случае если прокрутки слайдов дальше нет?
вот пример как стрелки скрываются https://tezeks.com/chehia/praga/ekskursija-v-drezden
вот у меня не скрываются http://dialtour.ru/assets/libs/lightbox2-master/examples/slick-1.6.0/index1.html
Стили CSS пропиши: .slick-arrow.slick-disabled { display: none; }
Здравствуйте!
На сайте стоит слайдер на автоплее. Где-то в середине страницы.
Если не «трогать» его, не кликать, не пролистывать мышкой, то ведет себя нормально, но если же сделать какую-либо манипуляцию с ним, пролистать, кликнуть по одному из баннеров, то становится невозможно прокручивать страницу и просматривать её иные фрагменты. Вернее, страница, содержащая слайдер, всегда возвращается к слайдеру, размещая его по середине. То есть я прокручиваю страницу вверх — она сама прокручивается на слайдер. То же самое вниз — прокрутил вниз, страница сама вернулась на слайдер.
В чем может быть проблема?
Спасибо.
Выше ответил Женя.
accessibility: false
Спасибо!
При старте страницы слайдер немного тупит и слайды не прячуться, а налазят друг на друга
Это следует решать только с помощью CSS, в каждом случае индивидуально. Слайдер не может мгновенно начать работать, но можно попробовать ускорить этот процесс, перенести код в самое начало страницы. Оптимизировать css стили, чтобы даже тогда когда слайдер ещё не начал работать, ничего не ехало. В общем, это всё индивидуально.
Добрый день.
Подскажите в чем проблема, я подключил в слайдере свойство draggable: false, т.е. отключил прокручивание картинок с помощью мышки и оставил прокрутку с помощью кнопок. На компьютере свойство работает, но на мобильном устройстве НЕТ. Как отключить прокручивание картинок пальцем, оставить только кнопки?
Спасибо.
draggable относится только к мышки. Чтобы отключить прокручивание пальцем используй свойство swipeToSlide:false
Всем привет! Такой вопрос: как убрать возможность кликать пока фотка не пролисталась?
Помогите пожалуйста! Нужно в slick слайдере сделать фиксированную ширину слайдов-1170px на больших разрешениях(более 1200px) при этом активный(текущий) слайд должен быть всегда по центру а остальные слайды должны быть видны в зависимости от разрешения(чем больше разрешение тем больше влазит по бокам остальных слайдов) Очень нужно)
Адаптивная вёрстка слайдера по ТЗ — это на фриланс площадки.
Возможно ли у данного слайдера отключить автоматический выбор слайдера при перелистывании?
А сделать так, чтобы только по нажатию мышки он активировался?
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: false,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
centerMode: true,
focusOnSelect: true,
easing: true
});
Как-нибудь можно. Наверно, надо ставить focusOnSelect=false, и писать отдельный обработчик для активации при нажатии на кнопки перелистывания. Хотя может и проще как-то можно. Не сталкивался.
подскажите пожалуйста есть ли возможность сделать так, чтобы слайдер начинал прокрутку только при наведении на него мышью? если нет, то какое событие и действие необходимо переопределить? спасибо!
из коробки такой возможности, вроде нет. Наверно, надо использовать события mouseover и mouseout чтобы отслеживать приход и уход курсора на слайдер. И автоматом включать или отключать его автопрокрутку —
$('.mainSlider').slickPlay();
$('.mainSlider').slickPause();
Здравствуйте. у меня вопрос: только начал изучать slick и не понял если в центрированном виде нужна карусель в html что надо а в js как я понял нужно вставлять с самого сайта slick (demos=>centredmode) помогите разобраться пж
В html все как в примерах. Ничего дополнительного не требуется.
Здравствуйте.
Подскажите а можно сделать полосу прокрутки у слик слайдера вместо навигационных точек??
Очень надо!!!
из коробки такого функционала нет. Программист на javascript наверно сможет придумать как сделать.
можно допилить самому это не проблема.
Не подскажете:
Скачал шаблон, в нем это слайдер. разобрался, что за слайдер отвечает скрипт slick.min.js. Не могу понять как сделать больше паузы между слайдами, уже меня разные значения.
Скорость автопрокрутки задается параметром autoplaySpeed в коде инициализации слайдера. А уж где этот код в шаблоне — это надо искать. Если этого параметра там нет, то используется значение по умолчанию — 3 секунды.
Здравствуйте, подскажите как сделать некоторые фотографии вертикальными? то есть в любом стандартном редакторе комп сам поворачивает фотографии, если они сфотографированы вертикально. Добавил слайдер и все фотки и горизонтальные и вертикальные стали горизонтальными.
Добрый день. Для слайдера надо заранее подготовить фото, желательно одного размера и одной ориентации. Сам слайдер ориентацию фоток не исправит.
Всё спасибо разобрался. думал если в редакторе фотка сама поворачивается, то значит она вертикальная, а на самом деле они все у меня горизонтальные и редактор сам как-то определяет какие поворачивать)
Ребята подскажите плиз, как сделать что бы слайдер всегда начинался с разных картинок или тут это нельзя сделать?
Есть такой параметр как initialSlide — номер слайда с которого начинать показ. Можно в неё присваивать случайное число, допустим, от 0 до 10:
var rand = Math.floor(Math.random() * 10);
а в вызове слайдера добавить:
'initialSlide' : rand
Скрипт хорош! Но с новой библиотекой не работает
https://code.jquery.com/jquery-3.1.1.min.js
Работает. У меня здесь jquery 3.2.1
Разобрался. От
Slick Slider – установка, настройка примеры и документация
Slick Slider — подключение и настройка jQuery плагина на примерах
SLICK SLIDER - лучший слайдер для сайта за 1 час. Подробный гайд. - YouTube
javascript - Slick Slider slickGoTo method breaking the... - Stack Overflow
Слайдер slick: как установить и настроить
Danielle Fischel Nude
Lesbian Female Agent Porn
Naked Jack Off
Slick Slit
