Главная Скрипты
Slick
Дата создания:
Обновлён:
Оставить отзыв

Slick

Подробности

Slick - известный и очень популярный слайдер для изображений и HTML для любого сайта. Но, что он кроет в себе? Отличный функционал, множество возможностей, о которых не знают даже профессионалы... Мы их раскроем все.

Смотрите также: Простой слайдер для HTML сайта jQuery +DEMO

Погрузись вместе с нами в мир, который уже создали для тебя... Это невероятно, но факт! Slick умеет так много, используя при этом так мало JS и CSS кода. Вместе с Slick, твоя жизнь стремительно измениться. Создавай уникальные эффекты, используй функционал этого маленького, но очень мощного слайдера на все 100%! И мы тебе в этом поможем.

Slick используют все... Начиная с каких-то дополнений для различных CMS, до больших порталов. Например, сайт канала ТВ3 (Россия) использует именно Slick...

Мы расскажем все, что знаем о Skick. Покажем, что мы уже сделали за многие годы его использования и поделимся исходным кодом. Тебе остается лишь все прикрутить к своему проекту.

Навигация:

  1. Функционал
  2. Обратные функции и др.

Slick slider, который ты не знаешь...

1. Краткий обзор и установка. Стандартные и банальные подключения.

  • Показываю какие есть варианты слайдера, подключаю с помощью разных способов.
  • Прохожусь по функционалу слайдера, используя стандартные и озвученные более-менее в справке (https://kenwheeler.github.io/slick/) возможности.

2, 3. Слайдер не только картинок...

  • Подключаем его, с использованием различных вариантов самих слайдов. Это могут быть не только изображения... Но и HTML =)
  • А изображения мы будем подгружать, только, если слайд с ним активен! Так сказать LazyLoading, но не по скроллу, а по переключению слайдов #2 варианта.

4. Малоизвестный функционал, вертикальный слайдер при скролле.

  • На самом деле, у Slick гораздо больше возможностей, чем указано в документации.
  • Мы рассмотрим адаптацию для различных экранов (PC, mobile, tablet).
  • А также поймем, как можно использовать Slick с помощью события Scroll.
  • Кроме того, сделаем слайдер НЕ ползающим (влево, вправо), а с эффектом fade.

5. Темы слайдера для разных случаев.

  • Убираем шрифт slick, оптимизируем код слайдера. Добавляем все в свои JS и CSS файлы.
  • Изменяем положения и общий вид функциональных элементов (навигационные кнопки, шарики с активным слайдом/количеством всех слайдов).

Видео + код + файлы + DEMO:

Функционал...

Setting Type Default Description
accessibility boolean true Включает вкладки и навигацию по клавишам со стрелками
adaptiveHeight boolean false Обеспечивает адаптивную высоту для слайдов с разной высотой.
autoplay boolean false Управление автоматическим стартом пролистывания слайдов
autoplaySpeed int(ms) 3000 Скорость автостарта (к предыдущей настройке) в миллисекундах (ms)
arrows boolean true Предыдущий/следующий кнопки
asNavFor string null Установите слайдер с которым будет синхронизироваться второй слайдер (имя класса или идентификатора)
appendArrows string $(element) Изменить место, где прикреплены стрелки навигации (Selector, htmlString, Array, Element, jQuery object)
appendDots string $(element) Изменить место, где прикреплены точки навигации (Selector, htmlString, Array, Element, jQuery object)
prevArrow string (html|jQuery selector) | object (DOM node|jQuery object)
code
<button type="button" class="slick-prev">Previous</button>
 Позволяет выбрать узел или настроить HTML для стрелки «Предыдущий».
nextArrow string (html|jQuery selector) | object (DOM node|jQuery object)
code
<button type="button" class="slick-next">Next</button>
 Позволяет выбрать узел или настроить HTML-код для стрелки «Следующий».
centerMode boolean false Включает центрированный вид с частичными предыдущими / следующими слайдами. Используйте с нечетными slidesToShow значениями.
centerPadding string '50px' Когда в режиме center mode, можно добавить отступы сбоку (px или %)
cssEase string 'ease' CSS3 Animation Easing (linear, ease-in..., cubic-bezier(...))
customPaging function n/a

Пользовательская функция вывода количества слайдов/текущий слайд или иная функция. Например:

code
$('.slideshow').slick({ slide: 'img', autoplay: true, dots: true, dotsClass: 'custom_paging', customPaging: function (slider, i) { //FYI just have a look at the object to find available information //press f12 to access the console in most browsers //you could also debug or look in the source console.log(slider); var slideNumber = (i + 1), totalSlides = slider.slideCount; return '<a class="custom-dot" role="button" title="' + slideNumber + ' of ' + totalSlides + '"><span class="string">' + slideNumber + '</span></a>'; } });

еще

code
1$(".slider").slick({

 autoplay: true,
 dots: true,
 customPaging : function(slider, i) {
 var thumb = $(slider.$slides[i]).data('thumb');
 return '<a><img src="'+thumb+'"></a>';
 },

 responsive: [{ 
 breakpoint: 500,
 settings: {
 dots: false,
 arrows: false,
 infinite: false,
 slidesToShow: 2,
 slidesToScroll: 2
 } 
 }]
});

еще

code
customPaging: function(slick,index) {
    var image_title = slick.$slides.get(index).find('img').attr('title') || '';
    return '<b> ' + targetImage + '</b>';
}
dots boolean false Показать точки (навигационные элементы)
dotsClass string 'slick-dots' Класс для точек
draggable boolean true Включить перетаскивание мыши
fade boolean false Управление fade-эффектом (исчезновение вместо пролистывания слайдлов влево/вправо)
focusOnSelect boolean false Включить фокусировку на выбранном элементе (по клику)
easing string 'linear' Добавить easing для jQuery animate. Использовать с библиотеками easing или методами по умолчанию
edgeFriction integer 0.15 Сопротивление при swipe (перемещение касанием). Чем больше, тем больше необходимо расстояния от начала касания, до сброса
infinite boolean true Бесконечная прокрутка слайдов
initialSlide integer 0 Изначальный номер слайда
lazyLoad string 'ondemand' Добавить ленивую загрузку (lazy loading). Принимает значения 'ondemand' или 'progressive'
mobileFirst boolean false Настройки адаптивности, используется для мобильных при первой отрисовке или НЕТ
pauseOnFocus boolean true Пауза при фокусе
pauseOnHover boolean true Пауза при наведении мыши
pauseOnDotsHover boolean false Пауза при наведении на управляющие точки
respondTo string 'window' Объект, на который реагирует реагирующий объект: 'window', 'slider' или 'min' (меньшее из двух)
responsive object none Объект, содержащий breakpoint и объекты настроек (см. Демонстрацию). Включает настройки для заданной ширины экрана. Установите настройки «unslick» вместо объекта, чтобы отключить пятно в заданной breakpoint.
rows int 1 Установка более 1 инициализирует режим сетки. Используйте slidesPerRow, чтобы установить, сколько слайдов должно быть в каждой строке.
slide element '' Элемент запроса для использования в качестве слайда
slidesPerRow int 1 С режимом сетки, инициализируемым с помощью опции строк, это устанавливает, сколько слайдов в каждой строке сетки.
slidesToShow int 1 ... слайдов показывать
slidesToScroll int 1 ... слайдов перемещать за 1 перемещение
speed int(ms) 300 время анимации перемещения/исчезновения-появления слайда
swipe boolean true включить ли управление с помощью swipe (перемещением мыши или пальцами)
swipeToSlide boolean false Разрешить пользователям перетаскивать или проводить пальцем прямо к слайду независимо от слайдов ToScroll
touchMove boolean true Включить движение слайдов одним касанием
touchThreshold int 5 Для продвижения слайдов пользователь должен провести пальцем по длине (1 / touchThreshold) * ширина слайдера
useCSS boolean true Вкл/выкл CSS Transitions (transition: all .5s ease)
useTransform boolean true Вкл/выкл CSS Transforms (transform: rotateX(180deg))
variableWidth boolean false Вариативная ширина слайдов
vertical boolean false Вертикальная ориентация слайдов
verticalSwiping boolean false Вертикальные управления swipe действиями
rtl boolean false Изменение направления RTL - right-to-left (справа налево) или LTR - left-ro-right (слева направо) 
waitForAnimate boolean true Игнорирует запросы на продвижение слайда во время анимации
zIndex number 1000 Установите значения zIndex для слайдов, полезно для IE9 и ниже

Обратные функции (callback)

Event Arguments Description
afterChange slick, currentSlide После изменения слайдов
beforeChange slick, currentSlide, nextSlide ДО изменения слайдов (событие изменения уже запущено)
breakpoint event, slick, breakpoint После окончания изменений
destroy event, slick Слайдер выключен (destroy, unslick) – противоположность функции подключения.
edge slick, direction Сообщает, когда доскроллили до конца в режиме НЕ бесконечном (NON infinite [Настройка: {infinite:FALSE}]).
init slick Первичная инициализация
reInit slick Повторная инициализация (если до этого была функция destroy)
setPosition slick Сообщает когда позиция слайдов ИЛИ размер был изменен
swipe {slick}, {settings}, "direction" Срабатывает ПОСЛЕ swipe/drag (свайпа пальцами или мышью ИЛИ перемещения мышью)
lazyLoaded event, slick, image, imageSource Срабатывает, когда изображениЕ! загрузилось в режиме lazyLoading (Настройка: {lazyLoad:'ondemand'} ИЛИ {lazyLoad:'progressive'})
lazyLoadError event, slick, image, imageSource Если изображения в режиме lazyLoad (как выше) НЕ загрузились
slickCurrentSlide none возвращает индекс активного слайда
slickGoTo int : slide number, boolean: dont animate Переход к слайду – по индексу
slickNext none Переход к следующему слайду
slickPrev none Переход к предыдущему слайду
slickPause none Пауза, если стоит режим autoplay [Настройки {autoplay;true}]
slickPlay none Если поставлена пауза в режиме autoplay, то эта функция запускает слайдер снова в режим autoplay
slickAdd html or DOM object, index, addBefore

Добавляет слайд. Если добавить ТАКЖЕ индекс, то слайд добавится ПОСЛЕ указанного индекса. Если индекс НЕ указан, то слайд добавится последним. Принимается HTML String || Object

code
var slideIndex = 5;
$('.js-add-slide').on('click', function() {
  slideIndex++;
  $('.slider-info').slick('slickAdd','<div><h3>' + slideIndex + '</h3></div>');
  $('.slider-info').slick('slickGoTo', 'slickCurrentSlide' + 1);
});
slickRemove index, removeBefore Удаление слайда по индексу. Если переменная removeBefore установлена в true, то будет удален первый слайд, если НЕ указан индекс (слайд, который необходимо удалить). Если removeBefore установлена в false, то будет удален последний слайд, если индекс НЕ указан.
slickFilter Selector or Function Фильтрация слайдов, используя jQuery .filter()
Посмотреть пример кода с фильтрами Slick слайдера
Скачать архив с примерами
code
var filterString = '';

$('.letter-filter a').on('click', function(event) {
    event.preventDefault();
    $('#responsive-carousel').slick('slickUnfilter');
    var filterString = $(this).attr('data-filter-by');
    console.log(filterString);
    $('#responsive-carousel').slick('slickFilter', '[data-first-letter="'+filterString+'"]');
    //$(this).text('Unfilter Slides');
    filtered = true;
});
slickUnfilter index Удаление примененных фильтров
slickGetOption option : string Получает индивидуальное значение параметра.
slickSetOption option : string, value : depends on option, refresh : boolean Устанавливает конкретное значение. Установите значение true, если требуется обновить UI.
code
slider = $('.slider').slick({infinite: false,speed: 300,slidesToShow: 1,adaptiveHeight: true,asNavFor: '#menu-mobile',draggable: true});$('input[type=text]').focus(function () {console.log('in');slider.slick("slickSetOption", "draggable", false, false);}).blur(function () {console.log('out');slider.slick("slickSetOption", "draggable", true, false);});
unslick none Обратное значение подключению slick() – деконструкция или деинициализация
code
$window.on('resize', function() {  if ($window.width() < 640) {    if ($slick_slider.hasClass('slick-initialized'))      $slick_slider.slick('unslick');    return  }  if ( ! $slick_slider.hasClass('slick-initialized'))    return $slick_slider.slick(settings);});
getSlick none Получить Slick Object
code
Slick.prototype.asNavFor = function(index) {var _ = this, asNavFor = _.options.asNavFor !== null ? $(_.options.asNavFor).slick('getSlick') : null;if(asNavFor !== null) asNavFor.slideHandler(index, true);};
Slick