slick
In slick 1.5 you can now add settings using the data-slick attribute. You still need to call $(element).slick() to initialize slick on the element.
Center Mode
Lazy Loading
Autoplay
Add & Remove
Filtering
Destroy
If you really want to be that guy.
Slider Syncing
Right to Left
Note: the HTML tag or the parent of the slider must have the attribute «dir» set to «rtl».
and a whole lot more.
Getting Started
Set up your HTML markup.
Move the /slick folder into your project
Add slick.css in your <head>
Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +)
Initialize your slider in your script file or an inline script tag
When complete, your HTML should look something like:
NOTE: I highly recommend putting your initialization script in an external JS file.
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» >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» >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 | 0 | 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 |
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 |
Methods
Methods are called on slick instances through the slick method itself in version 1.4, see below:
Как создать привлекательную отзывчивую галерею изображений с помощью slick.js
В этом руководстве мы будем использовать популярный jQuery плагин slick.js, чтобы создать привлекательную отзывчивую галерею изображений. Вот галерея, которую мы собираемся создать:
Обязательно посмотрите полноэкранную версию и измените размер окна браузера, чтобы увидеть, как изменяется макет в зависимости от размера экрана.
Что такое slick.js?
Slick.js — хорошо известный плагин jQuery, созданный Кеном Уилером, который позволяет создавать красивые отзывчивые слайдеры. Чтобы лучше понять, что может предложить этот плагин, ознакомьтесь с документацией.
К счастью, он работает не только во всех современных браузерах, но и в более старых, таких как IE 8+.
Наконец, вы можете взглянуть на версию для WordPress.
Начало работы с slick.js
Чтобы начать работу с slick, начните с загрузки и установки следующих файлов в вашем проекте:
- jQuery (≥1.7)
- slick.css или его минифицированная версия
- Slick.js или его минифицированная версия
При желании вы можете импортировать файл slick-theme.css .
Вы можете получить копию соответствующих файлов, посетив репозиторий Github, используя диспетчер пакетов (например, npm) или загрузив необходимые ресурсы через CDN (например, cdnjs). В этом руководстве я использую последний вариант.
Кроме того, я включил Babel для компиляции кода ES6 до ES5 и Lodash для использования функции debounce (мы будем использовать это позже).
Имея это в виду, если вы посмотрите на вкладку Settings нашего демо в codepen, вы увидите, что я включил один внешний CSS-файл и три внешних файла JavaScript.
CSS настройки в CodePen 
Настройки JavaScript в CodePen
1. HTML
На этом этапе важно понять структуру нашей страницы. Самое главное, мы определим две карусели, которые имеют одинаковые изображения и синхронизированы (как — мы обсудим позже). Размеры изображения составляют 860 x 550 пикселей, хотя в ваших собственных проектах они могут быть другими.
Наконец, в качестве части второй карусели мы укажем стрелки навигации, а также элемент, который отслеживает общее количество слайдов.
Вот необходимая структура для нашей демонстрационной страницы:
2. CSS
В общей сложности наша галерея должна иметь четыре разных вида, в зависимости от размера окна просмотра. Давайте сделаем их, следуя подходу mobile-first.
Когда окно браузера меньше 480 пикселей, оно будет выглядеть так, что видно только вторую карусель и навигационную панель:
Макет карусели на экстра маленьких экранах
Затем на экранах между 480px и 768px она должна выглядеть следующим образом, два эскиза под основным слайдом:
Макет карусели на маленьких экранах
Далее, на экранах между 769px и 1023px, мы представим третий эскиз:
Наконец, на больших экранах (≥1024px), она должна выглядеть следующим образом, миниатюры появляются сбоку (обратите внимание, что они не полностью соответствуют этому изображению):
Макет карусели на больших экранах
Все приведенные выше случаи сделаны в медиа-запросах, показанных ниже:
Обратите внимание на правило !important . Оно переопределяет встроенный стиль.
3. JavaScript
Давайте теперь обратим наше внимание на вещи, связанные с JavaScript.
Кэширование селекторов
Когда DOM готов, хорошей практикой будет кэшировать некоторые часто используемые селекторы:
Инициализация каруселей
Затем мы инициализируем и синхронизируем наши две карусели. Код, отвечающий за это, выглядит следующим образом:
Несомненно, лучший способ понять, как работает этот код, это прочитать документацию по slick. Однако, позвольте мне объяснить здесь две важные вещи:
- Опция конфигурации asNavFor позволяет нам синхронизировать карусели и использовать одну как навигацию для другой.
- По умолчанию slick использует преобразования CSS. Однако, в нашем случае мы отключили их, установив useTransform: false . Это происходит потому, что они вызывают небольшое мерцание в первом слайде первой карусели на больших экранах (мы могли бы отключить их только для первой карусели).
Отображение и настройка макета галереи
Наша галерея должна быть видна только тогда, когда все ресурсы страницы готовы. Первоначально появляется дополнительный прелоадер — снова обращаемся к разметке, он выглядит так:
На этом этапе мы должны снова подумать о желаемом макете галереи на больших экранах. Если вы посмотрите на соответствующие скриншоты, вы заметите, что обе карусели имеют одинаковые высоты. Чтобы достичь желаемого поведения, мы должны написать собственный код JavaScript (после нашего CSS). Этот код будет динамически устанавливать высоту первой карусели, равной высоте второй (или наоборот).
Зная вышеприведенные требования, вот код, который запускается, когда вся страница готова:
И вот объявление функции handleCarouselsHeight:
Когда страница загружается, галерея отлично работает. Но она также должна работать так, как ожидается, когда окно браузера будет изменено.
Код, относящийся к этой конкретной ситуации, показан ниже:
Обратите внимание, что обработчик события завернут внутрь функции debounce . Это Lodash функция, которая помогает нам ограничить количество вызовов этого обработчика.
Работа с событиями и методами slick
Теперь, когда мы успешно реализовали основные функции нашей галереи, давайте сделаем еще один шаг и создадим несколько дополнительных вещей.
Во-первых, в верхнем правом углу второй карусели мы показываем текущий слайд и общее количество слайдов.
Отображение текущего слайда и общего количества слайдов
Для этого мы используем события slick init и afterChange .
Вот соответствующий код:
В качестве дополнительного улучшения каждый раз, когда мы нажимаем на слайд первой карусели, связанный с ним слайд второй карусели должен быть активным. Благодаря методу slickGoTo от slick мы можем реализовать эту функциональность.
Вот соответствующий код:
4. Поддерживаемые браузеры
Это демо должно хорошо работать во всех последних браузерах, и вы спокойно можете использовать его в своих проектах.
Я столкнулся только с одной небольшой ошибкой в некоторых браузерах (Firefox, Edge) при тестировании демо на больших экранах. Когда вы нажимаете на стрелки навигации, все слайды первой карусели, кроме первой, не достигают верхнего края их родителя и оставляют зазор в один пиксель:
Однопиксельная ошибка Slick в некоторых браузерах
И последнее, но не менее важное: небольшие изменения и настройки могут потребоваться по мере изменения размера окна в зависимости от ваших потребностей.
Slick slider
Slick slider — это jquery плагин для быстрого создания на сайте адаптивного слайдера любой сложности. Его функционал позволяет реализовать зацикливание, автопроигрывание, эффект перехода, динамическое добавление слайдов и многое другое. Отдельно выделю возможность пролистывания слайдера пальцем на мобильных устройствах.
Подключение «slick slider» осуществляется следующим образом.
Jquery подгружаем только если на сайте его ещё нет.
Каждый слайд оборачивается в «div», внутри которого может быть любое содержимое:
Примеры использования «slick slider»
Рассмотрим примеры вызова плагина с разными настройками.
Вызов без параметров
При вызове без параметров на странице будет один слайд с навигационными стрелками.
Несколько слайдов
В примере выводим 3 слайда с параметрами зацикленной прокрутки (infinite), отображением навигационных точек (dots) и количеством прокручиваемых слайдов за раз.
Режим центрирования
В режиме центрирования активный слайд устанавливается по центру с классом «slick-center».
Адаптивный слайдер
Если на сайте адаптивная верстка, то слайдер можно подстроить под ширину экрана. Для этого используйте свойство «responsive». Оно позволяет установить для разных разрешений свои настройки. Рассмотрим пример.
В примере на основном разрешении сайта в ряд выводится 3 слайда. Если ширина видимой области от 768 пикселей до 481, то выводится 2 слайда. И один, если ширина менее 480 пикселей.
В настройках адаптивности можно перечислять любые параметры, не только «slidesToShow». Например, на мобильной версии сайта можно не выводить стрелки навигации или добавить центрирование слайдов.
Настройка slick slider
В таблице приведены основные настройки. Полный перечень на сайте разработчика.
| ПАРАМЕТР | ТИП | 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 | 0 | Номер слайда, с которого начинать показ |
| lazyLoad | string | ‘ondemand’ | Тип подгрузки слайдов. Принимает ‘ondemand’ или ‘progressive’ |
| pauseOnHover | boolean | true | Пауза автопроигрывания при наведении мыши |
| pauseOnDotsHover | boolean | false | Пауза автопроигрывания при наведении мыши на навигационные точки |
| pauseOnHover | boolean | true | Пауза автопроигрывания при наведении мыши |
| rows | int | 1 | Может быть ‘window’, ‘slider’ или ‘min’ |
Методы слайдера
Методы — это функции, которые могут совершить со слайдером какое-то действие или сообщить о его текущем состоянии. Метод можно вызывать в любом обработчике javascript, например, при нажатии на кнопку.
slickCurrentSlide — возвращает номер текущего слайда. Отсчёт ведётся с нуля.