Slick css что это
slick
the last carousel you’ll ever need
slick
the last carousel you’ll ever need
Features
Single Item
Multiple Items
Responsive Display
Variable Width
Adaptive Height
Data Attribute Settings
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
Add slick.js before your closing 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) | 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 | 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:
This new syntax allows you to call any internal slick method as well:
WordPress
Go Get It
You can also use slick with the jsDelivr CDN!
If you like slick, and also like Sass, try my Guff mixin library!
Установка и настройка слайдера Slick
Очень простой в установке и настройке, универсальный Slick слайдер, позволяет размещать в слайдах картинки и текстовый контент. Скачать данный слайдер можно здесь http://kenwheeler.github.io/slick/.
После того как вы скачали архив со слайдером – извлеките его в папку в директории вашего сайта предназначенную для хранения файлов слайдера. Далее следует подключить стили и библиотеки слайдера.
Теперь приступим к созданию html-каркаса для нашего слайдера. Принципиальное отличие данного слайдера от его собратьев заключается в том, что его элементы(слайды) должны быть заключены в блоки(теги div). В противном случае работать он не будет.
Вызвать слайдер можно с помощью функции slick():
Возможные конфигурации слайдера
Одиночный слайд
Для реализации такого слайдера следует просто вызвать слик, повесив его на какой либо класс, без настроек:
Адаптивная карусель
Для реализации карусели в вызов следует добавить настройку slidesToShow, которая указывает по сколько слайдов показывать в карусели за раз :
Для slick-карусели есть возможность настроить вывод определенного количества слайдов в зависимости от значения ширины экрана. Реализовать это можно c помощью параметра breakpoint:
Где breakpoint — это ширина при которой следует включать настройки.
Разная ширина и высота для слайдов
Слайдер Slick дает возможность создавать карусели с элементами разной ширины.
Для создания слайдера с картинками разной ширины используйте настройку variableWidth:
Для того чтобы с помощью Slick создать карусель с элементами разной высоты:
Отложенная загрузка изображений
Для того чтобы использовать отложенную загрузку изображений в слайдере Slick, следует заменить атрибут src на data-lazy:
В вызове слайдера необходимо использовать настройку lazyLoad со значением ‘ondemand’:
Слайдер с превью
Этот вид слайдера реализуется путем вывода двух слайдеров, которые синхронно выполняют переключение слайдов. Один из этих слайдеров выводит по одному слайду, а второй выполняет функцию карусели. Такие слайдеры часто используют на товарных карточках в интернет-магазинах.
Для реализации такого слайдера необходимо, вызвать одиночный слайдер и карусель отдельно, связав их с помощью настройки ‘asNavFor’:
Настройки слайдера
Для данного слайдера существует возможность дополнения параметров слайдера через HTML-код посредством атрибута data-slick.
Так же существует обильный перечень команд, используя которые вы сможете настроить слайдер по своему усмотрению.
Блог Vaden Pro
Слайдер slick: как установить и настроить
В статье приведен обзор установки и работы слайдера slick. Рассмотрены возможные варианты реализации слайдера, особенности переключения слайдов и способ вывода.
Довольно часто на различных интернет ресурсах можно встретить такой функциональный прием, как слайдер. Слайдером является несколько произвольных картинок, которые сообщают посетителю о возможных направлениях, в которых работает фирма. Переключения слайдера может быть установлено в автоматическом режиме, то есть по истечению определенного промежутка времени слайды перемещаются самостоятельно. Также стоит отметить, что в видимой зоне могут находиться несколько слайдов. Причем их содержимым может быть не только картинка, а и ссылка, форма обратной связи или какой либо другой функциональный прием.
Существует довольно много разновидностей слайдера и способов его реализации. В этой статье мы рассмотрим работу слайдера slick. Это наиболее распространенный и универсальный слайдер, также стоит отметить простоту его эксплуатации.
Первый шаг для установки слайдера заключается в скачивании плагина. Его можно скачать на ресурсе автора плагина, также там описаны разнообразные параметры для настроек, но на английском языке.
Поле того, как был скачанный архив со слайдером – извлекаем папку в директорию нашего сайта. Если вы просмотрите файлы слайдера, то увидите, что плагин имеет свои таблицы стилей. Соответственно, для того, чтобы они подключились необходимо записать определенный код в зону тега head. Выглядеть это будет примерно так
Процесс подключения стилей ничем не отличается от обычного подключения файла CSS. После этого необходимо подключить библиотеки слайдера. Они обычно подключаются в отдельном файле, в котором указаны все ссылки на файлы js-кода. Если такого файла у вас нет, то код нужно вставить внутри тега body, а именно до его закрытия. Вот так выглядит этот код
После этого можно приступать к формированию HTML-тела нашего слайдера. Здесь хочу отметить одну из особенностей slick. Большинство слайдеров строятся с помощью списков, составляющие которых выступают слайдами. Рассматриваемый плагин работает не со списками, а с блочными элементами. Это принципиально важно, так как если слайды будут помещены в список, то код не будет работать. HTML-код слайдера slick должен выглядеть примерно так
Завершающим этапом установки слайдера будет вставка скрипта, который запускает его работу. В тоже время данный скрипт отвечает за настройки работы слайдера. В зависимости от используемых классов и команд мы можем получить разные слайдеры с разным способом представления слайдов и их перелистывания. Подробнее речь пойдет об этом ниже, а сейчас покажем пример скрипта.
Этот скрипт вставляется в отдельный файл, где собраны все скрипты, работающие на сайте, либо после HTML-тела слайдера в рамках тега script.
Примеры применения разных конфигураций слайдера Slick
Одиночный слайдер
Первая и самая простая разновидность изучаемого плагина – одиночное представление слайдов. В этом случае у нас будет выводится один слайд на всю ширину экрана. При переключении по стрелкам меняться будет тоже только один слайд. Чтобы реализовать такое решение необходимо в скрипт-активатор вставить следующий код
Чисто визуально такой слайдер будет выглядеть примерно так
Множественный слайдер
Не сложно догадаться, что если существует одиночный вариант слайдера, то параллельно с этим можно реализовать и множественный. Другими словами, на экране будут выводится сразу несколько слайдов, причем можно сделать так, чтобы переключались слайды или по одному, или по несколько, или сразу все. Организовывается такой слайдер через следующий скрипт
На практике это будет иметь следующий вид
Не зацикленный слайдер
На практике большинство слайдеров зациклены. Проще говоря, после того, как было показан последний слайд, осуществляется переключение в начало списка и слайдер работает заново. Существует решение, благодаря которому можно создать слайдер без цикла. То есть, дальше последнего слайда переключение не будет совершаться, точно также, как и в обратном направлении, перед первым изображением ничего не будет показываться. Смотрим и запоминаем комбинацию кода, которая подключает такой слайдер
А в браузере получим примерно такую картину
Примечание
Хочу отметить, что для такого типа слайдера можно настроить адаптивный вывод определенного количества слайдов в зависимости от значения ширины экрана. К примеру, Вам необходимо, чтобы при ширине экрана менее 600 пикселей выводилось только 2 слайда, а переключались они по одному. Решение данной задачи будет выглядеть так
Переменная ширина и высота слайдов
Следующий тип слайдера, который мы рассмотрим, будет с переменной шириной слайдов. Такое решение позволяет нам использовать картинки с разной шириной, что в определенных случаях сохраняет их качество. Также для более красивого вывода можно отцентрировать текущий слайдер.
Существует также аналогичный параметр, который позволяет создать слайдер с переменной высотой слайдов. Для этого требуется последнюю строчку в коде, представленном выше, поменять на
Настройка слайдера с помощью атрибута
Для версии Slick 1.5 стало возможным дополнения параметров слайдера через HTML-код посредством атрибута data-slick. Указанный атрибут был специально разработан для исключения использования js-кода в документе HTML. Ниже представлен пример использования атрибута
Визуальный эффект ничем не буде отличаться от тех случаев, когда мы используем js-код внутри тега script.
Выводим текущий слайдер в центр экрана
Очень популярным считается вариант, когда основной слайд, который находится в центре внимания пользователя, устанавливается по середине экрана. При этом крайние слайды выходят слегка за пределы видимой зоны. Это создает неплохой визуальный эффект. Также параллельно с этим сделаем так, чтобы слайд, которому присваивается фокус, слегка увеличивался. Для этого прибавим внутренние отступы для блоков со слайдами, только в случае использования картинок в качестве слайдов эффект будет незаметен. Это выполняется следующим образом
В итоге получим что-то в этом роде
Плавное переключение
В стандартном состоянии слайдер осуществляет резкую замену слайдов. Но функционал Slick предусматривает плавный режим замены слайдов. Для этого нужно прибегнуть к атрибуту data-lazy, в котором прописывается путь к картинке. Атрибут нужно присвоить не обертке, а именно тегу изображения. Это позволит избежать использование js-кода. Альтернативой будет эта команда
атрибут следует записывать так
Плавное переключение без перемещения
Особенность такого слайдера заключается в том, что на экране находится только один слайд, который при переключении постепенно переходит в следующий. Эффект основан на принципе плавного увеличения прозрачности. То есть выбирается определенный временной отрезок, в течении которого прозрачность первого слайда изменяется от 0% до 100%, за счет чего становится видным следующий слайд. Скрипт такого слайдера будет выглядеть так
Синхронизирующийся слайдер
Этот вид слайдера имеет больше особых отличий, чем предыдущие. Эффект синхронизации проявляется в том, что сам слайдер со слайдами отведен на задний план. Ключевую роль играет увеличенное представление текущего слайда. Эта превьюжка располагается над слайдером. Секрет такой анимации заключается в выводе 2 слайдеров, которые синхронно выполняют переключение слайдов, только один из них выводит только один блок, а второй несколько. Скрипт слайдера:
Вот так он будет смотреться на вашем экране
Настройки
Как вы могли уже заметить, ведущую роль в слайдере играет скрипт-активатор. Он привязывает весь функционал слайдера к конкретному блоку с картинками или прочей информацией. И в зависимости от того, какие команды прописаны в этом скрипте, существуют разнообразные виды слайдеров Slick с разными функциональными возможностями. Ниже будет представлен перечень этих команд с описанием каждой. Это будет для Вас неплохой шпаргалкой, если Вы еще плохо знакомы с этим слайдером.
Подводя итог
В завершение хочется отметить, что Slick является наиболее универсальным и простым в использовании слайдером на сегодняшний день. Широкий интервал настроек слайдера охватывает великое множество решений реализации слайдеров, что является, наверно, самым весомым преимуществом этого слайдера.
Slick — лучший адаптивный слайдер для сайта
Slick slider — это jQuery плагин для быстрого создания на сайте адаптивного слайдера любой сложности. Его функционал позволяет реализовать зацикливание, автопроигрывание, эффекты перехода и многое другое. Отдельно выделю возможность пролистывания слайдера пальцем на устройствах с сенсорным экраном.
Подключение осуществляется следующим образом.
Подготавливаем разметку. Для этого каждый слайд оборачиваем в «div», внутри которого будет какое-то содержимое:
Примеры использования
Рассмотрим примеры вызова «Slick slider» с разными настройками.
Вызов без параметров
При вызвове без параметров получим один активный слайд с навигационными стрелками.
Несколько слайдов
Отобразим 3 слайда с параметрами зацикленной прокрутки (infinite), отображением навигационных точек (dots) и количеством прокручиваемых за раз слайдов (slidesToScroll).
Режим центрирования
В режиме центрирования активный слайд устанавливается по центру с классом «slick-center».
Адаптивность
Если на сайте адаптивная верстка, то слайдер можно подстроить под ширину экрана. Для этого используйте свойство «responsive». Оно позволяет установить для разных разрешений индивидуальные настройки. Рассмотрим пример.
Здесь по умолчанию устанавливается отображение в ряд 3 слайда. Если ширина видимой области браузера от 768 до 481 пикселя — 2. И один, если ширина менее 480 пикселей.
В настройках адаптивности можно задавать любые параметры. Например, на мобильной версии сайта можно отключить стрелки навигации.
Настройки
В таблице приведены основные настройки. Полный перечень на сайте разработчика.
| Параметр | Тип | 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’ |
Методы
Методы — это функции, которые могут совершить со слайдером какие-то действия или сообщать о его текущем состоянии. Метод можно вызывать в любом JS обработчике, например, при нажатии на кнопку.
slickCurrentSlide — возвращает номер текущего слайда. Отсчёт ведётся с нуля.
slickGoTo — переходит к слайду с указанным номером.
slickNext — прокручивает на один слайд вперёд.
slickPrev — прокручивает на один слайд назад.
slickPause — останавливает автоматическую прокрутку.
slickPlay — запускает автоматическую прокрутку.
События
События позволяют реагировать на определенные действия. Например, после прокрутки к 5 слайду выведем сообщение. Для этого включаем обработчик события « afterChange ».
« beforeChange » срабатывает перед переходом к другому слайду: