Slick

Events

Events are triggered on the source element. Example:


$(document).ready(function(){
  $('ul').slickLightbox().on({
    'show.slickLightbox': function(){ console.log('A `show.slickLightbox` event triggered.'); },1
    'shown.slickLightbox': function(){ console.log('A `shown.slickLightbox` event triggered.'); },
    'hide.slickLightbox': function(){ console.log('A `hide.slickLightbox` event triggered.'); },
    'hidden.slickLightbox': function(){ console.log('A `hidden.slickLightbox` event triggered.'); }
  });
});
Event Description
show.slickLightbox Triggered when the lightbox is opened.
shown.slickLightbox Triggered when the lightbox is opened, after the transitions took place.
hide.slickLightbox Triggered when the lightbox is closed.
hidden.slickLightbox Triggered when the lightbox is closed, after the transitions took place.

Начало работы с slick.js

Чтобы начать работу с slick, начните с загрузки и установки следующих файлов в вашем проекте:

  • jQuery (≥1.7)
  • или его минифицированная версия
  • или его минифицированная версия

При желании вы можете импортировать файл .

Вы можете получить копию соответствующих файлов, посетив репозиторий Github, используя диспетчер пакетов (например, npm) или загрузив необходимые ресурсы через CDN (например, cdnjs). В этом руководстве я использую последний вариант.

Кроме того, я включил Babel для компиляции кода ES6 до ES5 и Lodash для использования функции (мы будем использовать это позже).

Имея это в виду, если вы посмотрите на вкладку Settings нашего демо в codepen, вы увидите, что я включил один внешний CSS-файл и три внешних файла JavaScript.

CSS настройки в CodePenНастройки JavaScript в CodePen

Методы

Методы — это функции, которые могут совершить со слайдером какое-то действие или сообщить о его текущем состоянии. Метод можно вызывать в любом обработчике javascript, например, при нажатии на кнопку.

slickCurrentSlide — возвращает номер текущего слайда. Отсчёт ведётся с нуля.

$('.single-item').slick('slickCurrentSlide');

slickGoTo — прокручивает на слайд с указанным номером.

$('.single-item').slick('slickGoTo',4);

slickNext — прокручивает на один слайд вперёд.

$('.single-item').slick('slickNext');

slickPrev — прокручивает на один слайд назад.

slickPause — останавливает автоматическую прокрутку.

slickPlay — запускает автоматическую прокрутку.

Installation and usage

NOTE: official package appears to use as a dependency in package.json, despite it would be more appropriate to use it as a peer dependency to avoid possibility of using multiple versions of jquery. Be aware of that. When using you can solve this problem with aliases.

import Slick from 'vue-slick';

new Vue({

    components: { Slick },

    data() {
        return {
            slickOptions: {
                slidesToShow: 3,
                // Any other options that can be got from plugin documentation
            },
        };
    },

    // All slick methods can be used too, example here
    methods: {
        next() {
            this.$refs.slick.next();
        },

        prev() {
            this.$refs.slick.prev();
        },

        reInit() {
            // Helpful if you have to deal with v-for to update dynamic lists
            this.$nextTick(() => {
                this.$refs.slick.reSlick();
            });
        },

        // Events listeners
        handleAfterChange(event, slick, currentSlide) {
            console.log('handleAfterChange', event, slick, currentSlide);
        },
        handleBeforeChange(event, slick, currentSlide, nextSlide) {
            console.log('handleBeforeChange', event, slick, currentSlide, nextSlide);
        },
        handleBreakpoint(event, slick, breakpoint) {
            console.log('handleBreakpoint', event, slick, breakpoint);
        },
        handleDestroy(event, slick) {
            console.log('handleDestroy', event, slick);
        },
        handleEdge(event, slick, direction) {
            console.log('handleEdge', event, slick, direction);
        },
        handleInit(event, slick) {
            console.log('handleInit', event, slick);
        },
        handleReInit(event, slick) {
            console.log('handleReInit', event, slick);
        },
        handleSetPosition(event, slick) {
            console.log('handleSetPosition', event, slick);
        },
        handleSwipe(event, slick, direction) {
            console.log('handleSwipe', event, slick, direction);
        },
        handleLazyLoaded(event, slick, image, imageSource) {
            console.log('handleLazyLoaded', event, slick, image, imageSource);
        },
        handleLazeLoadError(event, slick, image, imageSource) {
            console.log('handleLazeLoadError', event, slick, image, imageSource);
        },
    },
});
<slick
  ref="slick"
  :options="slickOptions"
  @afterChange="handleAfterChange"
  @beforeChange="handleBeforeChange"
  @breakpoint="handleBreakpoint"
  @destroy="handleDestroy"
  @edge="handleEdge"
  @init="handleInit"
  @reInit="handleReInit"
  @setPosition="handleSetPosition"
  @swipe="handleSwipe"
  @lazyLoaded="handleLazyLoaded"
  @lazyLoadError="handleLazeLoadError">
  <a href="http://placehold.it/2000x1000"><img src="http://placehold.it/2000x1000" alt=""></a>
  <a href="http://placehold.it/2000x1000"><img src="http://placehold.it/2000x1000" alt=""></a>
  <a href="http://placehold.it/2000x1000"><img src="http://placehold.it/2000x1000" alt=""></a>
  <a href="http://placehold.it/2000x1000"><img src="http://placehold.it/2000x1000" alt=""></a>
  <a href="http://placehold.it/2000x1000"><img src="http://placehold.it/2000x1000" alt=""></a>
</slick>

If you need, you can import slick styles too:

import `node_modules/slick-carousel/slick/slick.css`;

Settings

Setting Type Default Description
accessibility boolean true Enables tabbing and arrow key navigation
adaptiveHeight boolean false Enables adaptive height for single slide horizontal carousels.
autoplay boolean false Enables Autoplay
autoplaySpeed int(ms) 3000 Autoplay Speed in milliseconds
arrows boolean true Prev/Next Arrows
asNavFor string null Set the slider to be the navigation of other slider (Class or ID Name)
appendArrows string $(element) Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object)
appendDots string $(element) Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object)
prevArrow string (html|jQuery selector) | object (DOM node|jQuery object) <button type=»button» class=»slick-prev»>Previous</button> Allows you to select a node or customize the HTML for the «Previous» arrow.
nextArrow string (html|jQuery selector) | object (DOM node|jQuery object) <button type=»button» class=»slick-next»>Next</button> Allows you to select a node or customize the HTML for the «Next» arrow.
centerMode boolean false Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
centerPadding string ’50px’ Side padding when in center mode (px or %)
cssEase string ‘ease’ CSS3 Animation Easing
customPaging function n/a Custom paging templates. See source for use example.
dots boolean false Show dot indicators
dotsClass string ‘slick-dots’ Class for slide indicator dots container
draggable boolean true Enable mouse dragging
fade boolean false Enable fade
focusOnSelect boolean false Enable focus on selected element (click)
easing string ‘linear’ Add easing for jQuery animate. Use with easing libraries or default easing methods
edgeFriction integer 0.15 Resistance when swiping edges of non-infinite carousels
infinite boolean true Infinite loop sliding
initialSlide integer Slide to start on
lazyLoad string ‘ondemand’ Set lazy loading technique. Accepts ‘ondemand’ or ‘progressive’
mobileFirst boolean false Responsive settings use mobile first calculation
pauseOnFocus boolean true Pause Autoplay On Focus
pauseOnHover boolean true Pause Autoplay On Hover
pauseOnDotsHover boolean false Pause Autoplay when a dot is hovered
respondTo string ‘window’ Width that responsive object responds to. Can be ‘window’, ‘slider’ or ‘min’ (the smaller of the two)
responsive object none Object containing breakpoints and settings objects (see demo). Enables settings sets at given screen width. Set settings to «unslick» instead of an object to disable slick at a given breakpoint.
rows int 1 Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row.
slide element » Element query to use as slide
slidesPerRow int 1 With grid mode intialized via the rows option, this sets how many slides are in each grid row. dver
slidesToShow int 1 # of slides to show
slidesToScroll int 1 # of slides to scroll
speed int(ms) 300 Slide/Fade animation speed
swipe boolean true Enable swiping
swipeToSlide boolean false Allow users to drag or swipe directly to a slide irrespective of slidesToScroll
touchMove boolean true Enable slide motion with touch
touchThreshold int 5 To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider
useCSS boolean true Enable/Disable CSS Transitions
useTransform boolean true Enable/Disable CSS Transforms
variableWidth boolean false Variable width slides
vertical boolean false Vertical slide mode
verticalSwiping boolean false Vertical swipe mode
rtl boolean false Change the slider’s direction to become right-to-left
waitForAnimate boolean true Ignores requests to advance the slide while animating
zIndex number 1000 Set the zIndex values for slides, useful for IE9 and lower

Прокрутка колесом + движение слайдов по вертикали

Для прокрутки слайдов колесом мышки нужен следующий скрипт (#index-slider — id нужного слайдера):

Для вертикального листания слайдов в скрипт инициации slick нужно добавить свойство vertical: true и verticalSwiping: true.

При прокрутке колеса мыши вниз, как мы обычно скроллим сайты, слайды будут перелистываться назад, т.е. с первого на последний и т.д. Чтобы это изменить нужно немного изменить скрипт скроллинга с «< 0» на «> 0», тогда при обычном скроллинге они будут листаться по порядку.


Чтобы слайдер начинался с конца, т.е. первый слайд был бы последним нужно в div слайдера добавить атрибут dir=»rtl». Но при этом слайд изначально будет на последней точке (dots).

Тэги: плагин

Поделится информацией с друзьями

Methods

Methods are called on slick instances through the slick method itself in version 1.4, see below:

This new syntax allows you to call any internal slick method as well:

Method Arguments Description
slickCurrentSlide none Returns the current slide index
slickGoTo int : slide number, boolean: dont animate Navigates to a slide by index
slickNext none Navigates to the next slide
slickPrev none Navigates to the previous slide
slickPause none Pauses autoplay
slickPlay none Starts autoplay
slickAdd html or DOM object, index, addBefore Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String || Object
slickRemove index, removeBefore Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.
slickFilter Selector or Function Filters slides using jQuery .filter()
slickUnfilter index Removes applied filtering
slickGetOption option : string Gets an individual option value.
slickSetOption option : string, value : depends on option, refresh : boolean Sets an individual value live. Set refresh to true if it’s a UI update.
unslick none Deconstructs slick
getSlick none Get Slick Object

Events

In slick 1.4, callback methods have been deprecated and replaced with events. Use them as shown below:

Event Arguments Description
afterChange slick, currentSlide Fires after slide change
beforeChange slick, currentSlide, nextSlide Fires before slide change
breakpoint event, slick, breakpoint Fires after a breakpoint is hit.
destroy event, slick When slider is destroyed, or unslicked.
edge slick, direction Fires when an edge is overscrolled in non-infinite mode.
init slick Fires after first initialization.
reInit slick Fires after every re-initialization
setPosition slick Fires after position/size changes
swipe slick, direction Fires after swipe/drag
lazyLoaded event, slick, image, imageSource Fires after image loads lazily
lazyLoadError event, slick, image, imageSource Fires after image fails to load

Установка и настройка слайдера Slick

Очень простой в установке и настройке, универсальный Slick слайдер, позволяет размещать в слайдах картинки и текстовый контент. Скачать данный слайдер можно здесь http://kenwheeler.github.io/slick/.

После того как вы скачали архив со слайдером – извлеките его в папку в директории вашего сайта предназначенную для хранения файлов слайдера. Далее следует подключить стили и библиотеки слайдера.

Теперь приступим к созданию html-каркаса для нашего слайдера. Принципиальное отличие данного слайдера от его собратьев заключается в том, что его элементы(слайды) должны быть заключены в блоки(теги div). В противном случае работать он не будет.

Вызвать слайдер можно с помощью функции slick():

Usage

Make sure you include CSS for both slick and slick-lightbox. Example HTML:

<!DOCTYPE html>
<html>
<head>
  <title>slick lightbox</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="bower_components/slick-carousel/slick/slick.css">
  <link rel="stylesheet" type="text/css" href="bower_components/slick-carousel/slick/slick-theme.css">
  <link rel="stylesheet" type="text/css" href="styles/slick-lightbox.css">
</head>
<body>
  <div>
    <ul>
      <li><a href="http://placekitten.com/1600/1300" data-caption="Lorem ipsum 1600x1300">http://placekitten.com/1600/1300</a></li>
      <li><a href="http://placekitten.com/1630/1280" data-caption="Lorem ipsum 1630x1280">http://placekitten.com/1630/1280</a></li>
      <li><a href="http://placekitten.com/1500/1250" data-caption="Lorem ipsum 1500x1250">http://placekitten.com/1500/1250</a></li>
    </ul>
  </div>
  <script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
  <script type="text/javascript" src="bower_components/slick-carousel/slick/slick.min.js"></script>
  <script type="text/javascript" src="scripts/slick-lightbox.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $('ul').slickLightbox({
        itemSelector: '> li > a'
      });
    });
  </script>
</body>
</html>

Slick слайдер

В последнее время основной слайдер также делаю на основе slick. Есть небольшая проблема — при загрузке страницы на какие-то доли секунд выводятся все слайды, а после складываются. Это я замаскировал так:

Делаем все, кроме одного слайда невидимыми:

А при загрузке страницы включаем и остальные:

Подгрузка слайдов

Slick обладает еще одной полезной функцией lazyload (отложенная загрузка изображений). Нужно только добавить в скрипт свойство lazyLoad: ‘ondemand’. И изменить вывод изображения:


или еще можно упростить так:

Также в этом примере кода уже добавил alt который берется из заголовка слайда.

А чтобы слайды наоборот загружались изначально нужно прописывать свойство lazyLoad: ‘progressive’

Штатная подгрузка изображений работает не вполне корректно, рекомендую использовать в связке с lazyload.

Мобильная версия слайдераМожно увеличить в моб. версии высоту слайдера, при этом обрежутся края у изображений, но зато картинка будет больше:

object-fit: cover; — классное свойство CSS 3, поддерживается большинством браузеров

3. JavaScript

Давайте теперь обратим наше внимание на вещи, связанные с JavaScript

Инициализация каруселей

Затем мы инициализируем и синхронизируем наши две карусели. Код, отвечающий за это, выглядит следующим образом:

Несомненно, лучший способ понять, как работает этот код, это прочитать документацию по slick. Однако, позвольте мне объяснить здесь две важные вещи:

  • Опция конфигурации  позволяет нам синхронизировать карусели и использовать одну как навигацию для другой.
  • По умолчанию slick использует преобразования CSS. Однако, в нашем случае мы отключили их, установив . Это происходит потому, что они вызывают небольшое мерцание в первом слайде первой карусели на больших экранах (мы могли бы отключить их только для первой карусели).

Отображение и настройка макета галереи

Наша галерея должна быть видна только тогда, когда все ресурсы страницы готовы. Первоначально появляется дополнительный прелоадер — снова обращаемся к разметке, он выглядит так:

На этом этапе мы должны снова подумать о желаемом макете галереи на больших экранах. Если вы посмотрите на соответствующие скриншоты, вы заметите, что обе карусели имеют одинаковые высоты. Чтобы достичь желаемого поведения, мы должны написать собственный код JavaScript (после нашего CSS). Этот код будет динамически устанавливать высоту первой карусели, равной высоте второй (или наоборот).

Зная вышеприведенные требования, вот код, который запускается, когда вся страница готова:

И вот объявление функции

Когда страница загружается, галерея отлично работает. Но она также должна работать так, как ожидается, когда окно браузера будет изменено.

Код, относящийся к этой конкретной ситуации, показан ниже:

Обратите внимание, что обработчик события завернут внутрь функции. Это Lodash функция, которая помогает нам ограничить количество вызовов этого обработчика

Работа с событиями и методами slick

Теперь, когда мы успешно реализовали основные функции нашей галереи, давайте сделаем еще один шаг и создадим несколько дополнительных вещей.

Во-первых, в верхнем правом углу второй карусели мы показываем текущий слайд и общее количество слайдов.

Отображение текущего слайда и общего количества слайдов


Для этого мы используем события slick  и .

Вот соответствующий код:

В качестве дополнительного улучшения каждый раз, когда мы нажимаем на слайд первой карусели, связанный с ним слайд второй карусели должен быть активным. Благодаря методу от slick мы можем реализовать эту функциональность.

Вот соответствующий код:

Events

In slick 1.4, callback methods have been deprecated and replaced with events. Use them as shown below:

Event Arguments Description
afterChange slick, currentSlide Fires after slide change
beforeChange slick, currentSlide, nextSlide Fires before slide change
breakpoint event, slick, breakpoint Fires after a breakpoint is hit.
destroy event, slick When slider is destroyed, or unslicked.
edge slick, direction Fires when an edge is overscrolled in non-infinite mode.
init slick Fires after first initialization.
reInit slick Fires after every re-initialization
setPosition slick Fires after position/size changes
swipe slick, direction Fires after swipe/drag
lazyLoaded event, slick, image, imageSource Fires after image loads lazily
lazyLoadError event, slick, image, imageSource Fires after image fails to load

Примеры использования

Рассмотрим примеры вызова «slick slider» плагина с разными настройками.

Вызов без параметров

При вызвове без параметров на странице будет однин слайд с навигационными стрелками.

    $('.single-item').slick();

1 2 3 4 5 6

Несколько слайдов

В примере выводим 3 слайда с параметрами зацикленной прокрутки (infinite), отображением навигационных точек (dots) и количеством прокручиваемых слайдов за раз.

    $('.multiple-items').slick({
      infinite: true,
      dots: true,
      slidesToShow: 3,
      slidesToScroll: 1
    });

1 2 3 4 5 6

Режим центрирования

В режиме центрирования активный слайд устанавливается по центру с классом «slick-center».

    $('.center').slick({
      centerMode: true,
      slidesToShow: 3,
    });

1 2 3 4 5 6

Адаптивность

Если на сайте адаптивная верстка, то слайдер можно подстроить под ширину экрана. Для этого используйте свойство «responsive». Оно позволяет установить для разных разрешений свои настройки. Рассмотрим пример.

$('.slick-example').slick({
	infinite: true,
	dots: true,
	slidesToShow: 3,
	slidesToScroll: 1,
	responsive: 
});

В примере на основном разрешении сайта в ряд выводится 3 слайда. Если ширина видимой области от 768 пикселей до 481, то выводится 2 слайда. И один, если ширина менее 480 пикселей.

В настройках адаптивности можно перечислять любые параметры, не только «slidesToShow». Например, на мобильной версии сайта можно не выводить стрелки навигации или добавить центрирование слайдов.

Настройки

В таблице приведены основные настройки. Полный перечень на сайте разработчика.

Параметр Тип Default Описание
adaptiveHeight boolean false Включает адаптирование высоты для одиночкного слайда горизонтальной карусели
autoplay boolean false Автоматическая прокрутка
autoplaySpeed int(ms) 3000 Скорость автопрокрутки в милисекундах
arrows boolean true Показ/скрытие навигационных кнопок
prevArrow html button Замена стандартной кнопки Preview
nextArrow html button Замена стандартной кнопки Next
dots boolean false Показ/скрытие навигационных точек под слайдером
draggable boolean true Включает/выключает способность перелистывания слайдера перетаскиванием мышью
fade boolean false Эффект затухания при перелистывании слайдов
focusOnSelect boolean false Устанавливает фокус на выбранный элемент карусели при клике
easing string ‘linear’ Анимационные эффекты перехода, их набор зависит от подключенных jQuery Easing плагинов
edgeFriction integer 0.15 Сопротивление при попытки прокрутить карусель, когда дальше нет слайдов и она не зацилена
infinite boolean true Бесконечное прокручивание (зацикливание)
initialSlide integer Номер слайда, с которого начинать показ
lazyLoad string ‘ondemand’ Тип подгрузки слайдов. Принимает ‘ondemand’ или ‘progressive’
pauseOnHover boolean true Пауза автопроигрывания при наведении мыши
pauseOnDotsHover boolean false Пауза автопроигрывания при наведении мыши на навигационные точки
pauseOnHover boolean true Пауза автопроигрывания при наведении мыши
rows int 1 Может быть ‘window’, ‘slider’ или ‘min’

Options

Option Type Default Description
background string Background for the lightbox. Is used directly as a CSS statement so that color and/or an image can be used.
closeOnEscape boolean Should the lightbox close upon pressing ESC?
closeOnBackdropClick boolean Should the lightbox close upon clicking on backdrop?
destroyTimeout number How many ms should we wait before actually removing the lightbox from the DOM? The default is used so that a 0.5s opacity transition can take place.
itemSelector string jQuery-like selector for the carousel-to-create items. The items should be anchors with attribute aiming at the desired lightbox image. If that’s not the case, you should specify the option.
navigateByKeyboard boolean Can you use keyboard arrows to navigate the carousel?
slick object Slick options to pass to the carousel.
caption various Should the images be captioned? If , no caption is created. You can pass your own function accepting the and attributes (e.g. , with being an object) or a string with the name of the to be fetched ( will get the value of attribute).
src various How to get the image urls? If , no src is taken as the attribute. You can pass your own function accepting the element as an attribute (e.g. ) or a string with the name of the attribute to be fetched ( will get the value of attribute).
captionPosition various Where should the caption be placed? When set to ‘dynamic’, the caption is displayed right under the image. When ‘bottom’, the caption is on the bottom of the screen independent to the image size.
images various When passed an array, slick lightbox doesn’t scan the elements for image URLs and uses array’s values instead.
useHistoryApi boolean When , opening the lightbox does a . The plugin then listens for the event to close the lightbox.
layouts object See
shouldOpen function Given a function, checks the return value before opening. If the function returns a falsy value, the lightbox is not opened upon clicking on the items. Accepts three arguments — the slick lightbox instance as the first, the clicked element as the second and the click event as the last.
imageMaxHeight number Maximum height of the lightbox images. Relative to the window height.
lazy boolean Should the images be lazyloaded?
lazyPlaceholder string Path to lazyloading placeholder. Defaults to a blank gif.

Settings

Setting Type Default Description
accessibility boolean true Enables tabbing and arrow key navigation
adaptiveHeight boolean false Enables adaptive height for single slide horizontal carousels.
autoplay boolean false Enables Autoplay
autoplaySpeed int(ms) 3000 Autoplay Speed in milliseconds
arrows boolean true Prev/Next Arrows
asNavFor string null Set the slider to be the navigation of other slider (Class or ID Name)
appendArrows string $(element) Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object)
appendDots string $(element) Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object)
prevArrow string (html|jQuery selector) | object (DOM node|jQuery object) Previous Allows you to select a node or customize the HTML for the «Previous» arrow.
nextArrow string (html|jQuery selector) | object (DOM node|jQuery object) Next Allows you to select a node or customize the HTML for the «Next» arrow.
centerMode boolean false Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
centerPadding string ’50px’ Side padding when in center mode (px or %)
cssEase string ‘ease’ CSS3 Animation Easing
customPaging function n/a Custom paging templates. See source for use example.
dots boolean false Show dot indicators
dotsClass string ‘slick-dots’ Class for slide indicator dots container
draggable boolean true Enable mouse dragging
fade boolean false Enable fade
focusOnSelect boolean false Enable focus on selected element (click)
easing string ‘linear’ Add easing for jQuery animate. Use with easing libraries or default easing methods
edgeFriction integer 0.15 Resistance when swiping edges of non-infinite carousels
infinite boolean true Infinite loop sliding
initialSlide integer Slide to start on
lazyLoad string ‘ondemand’ Set lazy loading technique. Accepts ‘ondemand’ or ‘progressive’
mobileFirst boolean false Responsive settings use mobile first calculation
pauseOnFocus boolean true Pause Autoplay On Focus
pauseOnHover boolean true Pause Autoplay On Hover
pauseOnDotsHover boolean false Pause Autoplay when a dot is hovered
respondTo string ‘window’ Width that responsive object responds to. Can be ‘window’, ‘slider’ or ‘min’ (the smaller of the two)
responsive object none Object containing breakpoints and settings objects (see demo). Enables settings sets at given screen width. Set settings to «unslick» instead of an object to disable slick at a given breakpoint.
rows int 1 Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row.
slide element Element query to use as slide
slidesPerRow int 1 With grid mode intialized via the rows option, this sets how many slides are in each grid row. dver
slidesToShow int 1 # of slides to show
slidesToScroll int 1 # of slides to scroll
speed int(ms) 300 Slide/Fade animation speed
swipe boolean true Enable swiping
swipeToSlide boolean false Allow users to drag or swipe directly to a slide irrespective of slidesToScroll
touchMove boolean true Enable slide motion with touch
touchThreshold int 5 To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider
useCSS boolean true Enable/Disable CSS Transitions
useTransform boolean true Enable/Disable CSS Transforms
variableWidth boolean false Variable width slides
vertical boolean false Vertical slide mode
verticalSwiping boolean false Vertical swipe mode
rtl boolean false Change the slider’s direction to become right-to-left
waitForAnimate boolean true Ignores requests to advance the slide while animating
zIndex number 1000 Set the zIndex values for slides, useful for IE9 and lower

С этим читают