Слайдер slick добавление слайдов по ajax. Адаптивные jQuery слайдеры для landing page

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

Довольно часто на различных интернет ресурсах можно встретить такой функциональный прием, как слайдер. Слайдером является несколько произвольных картинок, которые сообщают посетителю о возможных направлениях, в которых работает фирма. Переключения слайдера может быть установлено в автоматическом режиме, то есть по истечению определенного промежутка времени слайды перемещаются самостоятельно. Также стоит отметить, что в видимой зоне могут находиться несколько слайдов. Причем их содержимым может быть не только картинка, а и ссылка, форма обратной связи или какой либо другой функциональный прием.

Существует довольно много разновидностей слайдера и способов его реализации. В этой статье мы рассмотрим работу слайдера slick. Это наиболее распространенный и универсальный слайдер, также стоит отметить простоту его эксплуатации.

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

Поле того, как был скачанный архив со слайдером – извлекаем папку в директорию нашего сайта. Если вы просмотрите файлы слайдера, то увидите, что плагин имеет свои таблицы стилей. Соответственно, для того, чтобы они подключились необходимо записать определенный код в зону тега head. Выглядеть это будет примерно так

< link rel= "stylesheet" type= "text/css" href= "slick/slick.css" /> < link rel= "stylesheet" type= "text/css" href= "slick/slick-theme.css" />

Процесс подключения стилей ничем не отличается от обычного подключения файла CSS. После этого необходимо подключить библиотеки слайдера. Они обычно подключаются в отдельном файле, в котором указаны все ссылки на файлы js-кода. Если такого файла у вас нет, то код нужно вставить внутри тега body, а именно до его закрытия. Вот так выглядит этот код

< script type= "text/javascript" src= "//code.jquery.com/jquery-1.11.0.min.js" > < script type= "text/javascript" src= "//code.jquery.com/jquery-migrate-1.2.1.min.js" > < script type= "text/javascript" src= "slick/slick.min.js" >

После этого можно приступать к формированию HTML-тела нашего слайдера. Здесь хочу отметить одну из особенностей slick. Большинство слайдеров строятся с помощью списков, составляющие которых выступают слайдами. Рассматриваемый плагин работает не со списками, а с блочными элементами. Это принципиально важно, так как если слайды будут помещены в список, то код не будет работать. HTML-код слайдера slick должен выглядеть примерно так

< div class = "slick-slider" > < div> Слайд1 < div> Слайд2 < div> Слайд3

Завершающим этапом установки слайдера будет вставка скрипта, который запускает его работу. В тоже время данный скрипт отвечает за настройки работы слайдера. В зависимости от используемых классов и команд мы можем получить разные слайдеры с разным способом представления слайдов и их перелистывания. Подробнее речь пойдет об этом ниже, а сейчас покажем пример скрипта.

$(document) . ready(function () { $(".slick-slider).slick({ setting-name: setting-value }); });

Этот скрипт вставляется в отдельный файл, где собраны все скрипты, работающие на сайте, либо после HTML-тела слайдера в рамках тега script .

Примеры применения разных конфигураций слайдера Slick

Первая и самая простая разновидность изучаемого плагина – одиночное представление слайдов. В этом случае у нас будет выводится один слайд на всю ширину экрана. При переключении по стрелкам меняться будет тоже только один слайд. Чтобы реализовать такое решение необходимо в скрипт-активатор вставить следующий код

$(".single-slide" ) . slick() ;

Чисто визуально такой слайдер будет выглядеть примерно так

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

$(".multiple- slide " ) . slick({ infinite: true , slidesToShow: 3 , //количество слайдов, которые выводятся на экране slidesToScroll: 2 //количество слайдов, которые перелистываются за один раз } ) ;

На практике это будет иметь следующий вид

Не зацикленный слайдер

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

SlidesToShow: 4 , slidesToScroll: 2 , } ) ;

А в браузере получим примерно такую картину

Примечание

Хочу отметить, что для такого типа слайдера можно настроить адаптивный вывод определенного количества слайдов в зависимости от значения ширины экрана. К примеру, Вам необходимо, чтобы при ширине экрана менее 600 пикселей выводилось только 2 слайда, а переключались они по одному. Решение данной задачи будет выглядеть так

$(".uncycle" ) . slick({ infinite: false , speed: 350 , // определяем скорость перелистывания slidesToShow: 4 , //количество слайдов для показа slidesToScroll: 2 , //сколько слайдов за раз перелистнется responsive: [ { breakpoint: 600 , //сообщает, при какой ширине экрана нужно включать настройки settings: { slidesToShow: 2 , slidesToScroll: 1 , infinite: true , } } ] } ) ;

Переменная ширина и высота слайдов

Следующий тип слайдера, который мы рассмотрим, будет с переменной шириной слайдов. Такое решение позволяет нам использовать картинки с разной шириной, что в определенных случаях сохраняет их качество. Также для более красивого вывода можно отцентрировать текущий слайдер.

$(".var-width" ) . slick({ infinite: true , speed: 250 , // определяем скорость перелистывания slidesToShow: 1 , //количество слайдов для показа centerMode: true , //текущий слайд по центру variableWidth: true //установим переменную ширину } ) ;

Существует также аналогичный параметр, который позволяет создать слайдер с переменной высотой слайдов. Для этого требуется последнюю строчку в коде, представленном выше, поменять на

adaptiveHeight: true

Настройка слайдера с помощью атрибута

Для версии Slick 1.5 стало возможным дополнения параметров слайдера через HTML-код посредством атрибута data-slick. Указанный атрибут был специально разработан для исключения использования js-кода в документе HTML. Ниже представлен пример использования атрибута

< div class = "slick-slider" data- slick= "{"slidesToShow": 3, "slidesToScroll": 1}" > < div> Слайд1 < div> Слайд2 < div> Слайд3

Визуальный эффект ничем не буде отличаться от тех случаев, когда мы используем js-код внутри тега script.

Выводим текущий слайдер в центр экрана

Очень популярным считается вариант, когда основной слайд, который находится в центре внимания пользователя, устанавливается по середине экрана. При этом крайние слайды выходят слегка за пределы видимой зоны. Это создает неплохой визуальный эффект. Также параллельно с этим сделаем так, чтобы слайд, которому присваивается фокус, слегка увеличивался. Для этого прибавим внутренние отступы для блоков со слайдами, только в случае использования картинок в качестве слайдов эффект будет незаметен. Это выполняется следующим образом

$(".middle" ) . slick({ centerMode: true , //центруем текущий слайд centerPadding: "50px" , //слегка увеличиваем текущий слайд slidesToShow: 3 //выводим 3 слайда для просмотра } ) ;

В итоге получим что-то в этом роде

Плавное переключение

В стандартном состоянии слайдер осуществляет резкую замену слайдов. Но функционал Slick предусматривает плавный режим замены слайдов. Для этого нужно прибегнуть к атрибуту data-lazy, в котором прописывается путь к картинке. Атрибут нужно присвоить не обертке, а именно тегу изображения. Это позволит избежать использование js-кода. Альтернативой будет эта команда

lazyLoad: "ondemand"

атрибут следует записывать так

< img data- lazy = " images/slaid.jpg" >

Плавное переключение без перемещения

Особенность такого слайдера заключается в том, что на экране находится только один слайд, который при переключении постепенно переходит в следующий. Эффект основан на принципе плавного увеличения прозрачности. То есть выбирается определенный временной отрезок, в течении которого прозрачность первого слайда изменяется от 0% до 100%, за счет чего становится видным следующий слайд. Скрипт такого слайдера будет выглядеть так

$(".fade" ) . slick({ infinite: true , speed: 400 , fade: true , cssEase: "linear" } ) ;

Синхронизирующийся слайдер

Этот вид слайдера имеет больше особых отличий, чем предыдущие. Эффект синхронизации проявляется в том, что сам слайдер со слайдами отведен на задний план. Ключевую роль играет увеличенное представление текущего слайда. Эта превьюжка располагается над слайдером. Секрет такой анимации заключается в выводе 2 слайдеров, которые синхронно выполняют переключение слайдов, только один из них выводит только один блок, а второй несколько. Скрипт слайдера:

$(".main" ) . slick({ slidesToShow: 1 , slidesToScroll: 1 , arrows: false , fade: true , asNavFor: ".slider-nav" } ) ; $(".second).slick({ slidesToShow: 3, slidesToScroll: 1, asNavFor: " . slider- for ", dots: true, centerMode: true, focusOnSelect: true });

Вот так он будет смотреться на вашем экране

Настройки

Как вы могли уже заметить, ведущую роль в слайдере играет скрипт-активатор. Он привязывает весь функционал слайдера к конкретному блоку с картинками или прочей информацией. И в зависимости от того, какие команды прописаны в этом скрипте, существуют разнообразные виды слайдеров Slick с разными функциональными возможностями. Ниже будет представлен перечень этих команд с описанием каждой. Это будет для Вас неплохой шпаргалкой, если Вы еще плохо знакомы с этим слайдером.

аccessibility – начальное значение этого параметра установлено как true, он отвечает за подключения навигационных кнопок для слайдера – это стрелки вперед и назад, а также кнопки в виде точек.
adaptiveHeight – применяется только к одиночному слайдеру, у которого будет изменятся высота родительского контейнера в зависимости от высоты слайдера. В начальных условиях настройка не подключена.
autoplay – настраивает перелистывание слайдов в автоматическом режиме, без вмешательства пользователя. Стандартное значение этой настройки соответствует false.
autoplaySpeed – этот параметр является вспомогательным для autoplay и устанавливает промежуток времени, по истечении которого будет осуществлено автоматическое перелистывание слайда. Изначально для него прописано значение 3000 миллисекунд.
arrows – подключает к слайдеру стрелки вперед и назад. С помощью таблицы внешних стилей можно изменять положение и внешний вид этих стрелок.
asNavFor – устанавливает навигационную связь между двумя слайдерами посредством идентификатора или класса. В начальных условиях параметр соответствует нулевому значению.
prevArrow – позволяет изменить внешний вид стандартной навигационной стрелки, которая отлистывает предыдущий слайд.
nextArrow – аналогичен функциям предыдущему параметру, но отвечает за стрелку, переключающую слайд вперед.
centerMode – фиксирует текущий слайд по центру родительского контейнера, изначально параметр выключен.
centerPadding – при включенном центральном режиме показа текущего слайда (предыдущий параметр) устанавливает для этого слайда внутренний отступ, что визуально позволяет увеличивать текущий слайд.
cssEase – отвечает за анимацию переключения картинок, может делать ее плавной или более резкой. Принимает стандартное значение "ease".
customPaging – позволяет вставлять собственный шаблон для просмотра слайдера.
dots – подключает точки-переключатели, по умолчанию находится в выключенном состоянии.
draggable – подключает возможность перелистывания слайдов зажатием мышки. То есть, если навести на слайдер курсор мыши, зажать ее и передвинуть в сторону, то и слайд переключится на следующий.
fade – создает эффект затухания слайда при переключении, анимационный эффект.
focusOnSelect – фокусирует заданный элемент слайдера.
easing – позволяет установить особый анимационный режим при переключении картинок.
edgeFriction – отключает переключение слайдов на последнем элементе. Срабатывает только в том случае, если слайдер не зациклен.
infinite – зацикливает показ слайдов. Это значит при переключении последней картинки слайд-шоу начнется сначала.
initialSlide – определяет картинку, с которой начнется показ слайд-шоу. По умолчанию слайдер для старта выбирает первое по порядку изображение.
lazyLoad – позволяет установить режим подгрузки следующих слайдов. Доступно только 2 значения для настройки: "ondemand" и "progressive", причем последнее является значением по умолчанию.
pauseOnHover – останавливает перелистывание слайдов при наведении курсора мыши на тело слайдера. Работает, только если определено автоматическое переключение слайдов.
pauseOnDotsHover - останавливает перелистывание слайдов при наведении курсора мыши на точечные переключатели. Работает, только если определено автоматическое переключение слайдов.
respondTo – вызывает реакцию на изменения ширины окна браузера. Для использования доступны три значения: "window", "slider" или "min".
responsive – позволяет адаптировать настройки слайдера под ширину экрана. Отличается от предыдущей настройки тем, что ограничение ширины определяется точным значением в пикселях. Используется для адаптивной верстки под мобильные устройства.
slidesToShow – позволяет установить количество картинок, выводимых в видимой зоне. Изначально показывается 1 слайд, но этим значением можно варьировать.
slidesToScroll – сообщает слайдеру сколько нужно поменять картинок при переключении.
speed – фиксирует скорость, с которой будет осуществляться переключение слайдов.
variableWidth – адаптирует ширину контейнеров слайдера под ширину каждой показываемой картинки.

Подводя итог

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

Обзор установки слайдера slick под библиотеку jQuery. Данный плагин занимает одно из наиболее высоких мест в рейтинге плагинов для создания слайдшоу - .

Наверное, это место он получил заслуженно, поэтому стоит с ним разобраться и положить в свою копилочку веб-разработчика. Домашняя страничка плагина с описание установки и различных примеров работы находится здесь - slick Demos . Плагин мне понравился всем - он имеет в своем составе все функции управления, легок и прост в установке, HTML-разметка для его создания проста и семантична. В комплекте плагин slick имеет полный набор настроек, которые легко подключить в файле конфигурации.

Подключение плагина slick

Процесс подключения плагина slick в рабочем проекте очень прост, только нужно соблюдать правильность выполнения шагов.

Создание разметки под slick

HTML-разметка под плагин slick семантична и проста. Достаточно создать список с произвольным именем класса. В руководстве Getting Started на официальной странице плагина slick приводится такой пример HTML-разметки:

Моя попытка создать слайдер на основе HTML-разметки в виде обычного маркированного списка:

… успеха не принесла - плагин slick не заработал! Возможно, стоит через CSS-стили преобразовать элементы

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

Следующим шагом будет получение архива плагина slick. Это можно сделать несколькими способами. Первый - это скачать его со страницы Go Get It . Или же перейти на страницу GitHub автора и забрать оттуда zip-архив плагина - slick GitHub . В обоих случаях получим архив с именем

HTML-документа производим подключение готовых CSS-стилей плагина slick:

В теле HTML-документа перед закрывающим тегом

вставляем три строки с js-скриптами:

Как видим, в первых двух строках производится скачивание библиотеки jQuery-1.11.0 и плагина jQuery Migrate 1.2.1 через CDN. Третий плагин

подключаем скрипт инициализации плагина: $ (document ). ready (function (){ $ (".slider" ). slick ({ dots : true }); });

Итоговая HTML-разметка и подключение CSS-таблиц, JS-скриптов будет выглядеть таким образом:

Мне хочется упомянуть о такой полезной вещи, как консоль браузера Google Chrome. Почему она полезная? Потому что она уже второй раз выручает меня (первый раз это было с плагином jqFancyTransitions - Слайдер jqFancyTransitions) и помогает найти ошибки при подключении скриптов в HTML-документе. Незаменимая штука!

Чтобы проиллюстрировать пример использования и полезности консоли Chrome, запускаю в браузере индексный index.html файл, который создал ранее.

И что?! Позвольте, а где-же плагин slick - где слайдер, созданный с его помощью? Где те обещанные красоты, которые так ярко продемонстрированы на официальной странице проекта - Demos ?! Странно - но их нет!

Хех, а я правильно выполнил подключение скрипта? Ну-ка, еще раз “пробегусь” по документации… Все верно, но у меня ничего не работает… Может, все-же переписать индексную страницу заново? Может быть, но таких “а может” наберется большое количество, с различными вариациями…

Но давайте я открою консоль браузера Google Chrome и перейду в ней на вкладку “Network”:

Вот и причина того, что плагин slick не работает на моей странице! Просто библиотеку jQuery 1.11.0 и ее плагин jQuery Migrate 1.2.1 браузеру Chrome не удалось подгрузить через CDN. Сколько бы я еще потратил времени и нервов, чтобы методом “научного тыка” определить причину “поломки”, если бы не эта консоль, неизвестно.

Разбираться, почему не удалось браузеру подгрузить оба этих файла через CDN, у меня нет ни желания, ни времени. Поэтому я просто скачаю оба этих файла “вручную” и подключу локально:

Снова запускаю индексную страницу index.html в браузере Google Chrome и … о Чудо! Плагин slick работает:

Картинки прокручиваются автоматически и внизу видна пагинация, сгенерированная скриптом slick согласно настройкам:

dots : true , autoplay : true

… в конфигурационном файле. Помимо этого, были сгенерированы стрелки для перемотки изображений “вручную” взад-вперед (они не видны на белом фоне HTML-страницы). Другие многочисленные настройки плагина slick можно посмотреть на официальной странице - Settings .

NOTE: I highly recommend putting your initialization script in an external JS file.

В этой статье я так не поступил по одной простой причине - ради наглядности примера и быстроты его создания.

Редактирование плагина slick

Теперь осталось дело за малым - вооружившись инспектором элементов страницы (к примеру, Firebug), “вытащим” из DOM-дерева нашей страницы имена классов нужных нам элементов и произведем их легкое редактирование через CSS-правила:

body { background-color : lighten (#ccc , 5% ); .slider{ width : 300px ; margin : 10px auto ; padding : 5px ; background-color : #ccc ; border : 3px solid #000 ; @include border-radius(3px); .slick-dots{ bottom : -30px ; } } }

Создаю для тела HTML-документа

добавлю padding, границу со скруглением и фоновую заливку; отцентрирую его на странице и немного опущу вниз. А также немного приподниму вверх блок

1	.slick-dots

с пагинацией.

Смотрим результат:

Заключение

Плагин slick мне однозначно понравился. Простая установка и подключение, генерирование элементов управления показом слайдшоу, большое количество разнообразных настроек. С разнообразными вариантами настройки внешнего вида можно и нужно разобраться на странице примеров - Demos . И подогнать под необходимые конкретные условия, если потребуется.

Удачного кодинга!

Скрипт слайдера мы скачали в прошлом уроке командой

$ bower i slick.js

Также его можно найти в Google - первая ссылка по запросу slick http://kenwheeler.github.io/slick/

Преимущества слайдера: - поддерживает touch events - можно просматривать с телефона, листая пальцем
- поддерживает responsive - можно задать разное количество слайдов в зависимости от размера экрана: на больших экранах просматривать по 4 слайда, на средних по 2-3, на телефонах по одному

Хорошая практика - подключение скриптов из папки bower_components

Тогда при обновлении скрипта программой bower не придётся переписывать номер версии в коде, так как bower даёт скриптам постоянные имена, которые при обновлении не меняются.

Что касается стилей, которые находятся в папке slick: slick.css, slick.less, slick.theme.less их лучше скопировать в папку с css и подключить оттуда. Если оставить их на месте, и в стили слайдера вносить изменения, то при обновлении скрипта все эти изменения будут утеряны.

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

1 2 3 4 5 6

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

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

Показ нескольких слайдов В примере мы установили для «slick slider» параметры зацикленной прокрутки, включили отображение навигационных точек, указали количество отображаемых и прокручиваемых слайдов.
$ (".multiple-items" ). slick ({
infinite : true ,
//зацикленный слайдер - после последнего слайда идёт первый dots : true ,
//точки под слайдером, показывающие активный слайд
slidesToShow : 3 ,
//количество слайдов, которые выводятся на экране slidesToScroll : 1
//количество слайдов, которые перелистываются за один раз
}); Режим центрирования В режиме центрирования активный слайд устанавливается по центру.
$ (".center" ). slick ({
centerMode : true ,
slidesToShow : 3 ,
});
Центральный слайд имеет класс «slick-center», а значит можно его отдельно оформить.Адаптивность В слайдере можно настроить адаптивный вывод определенного количества слайдов в зависимости от значения ширины экрана. К примеру, вам необходимо, чтобы при ширине экрана менее 600 пикселей выводилось только 2 слайда, а переключались они по одному. Решение данной задачи будет выглядеть так

Плавное переключение В стандартном состоянии слайдер осуществляет резкую замену слайдов. Но функционал Slick предусматривает плавный режим замены слайдов. Для этого нужно прибегнуть к атрибуту data-lazy, в котором прописывается путь к картинке. Атрибут нужно присвоить не обертке, а именно тегу изображения. Это позволит избежать использование js-кода. Альтернативой будет эта команда

LazyLoad: "ondemand"

Атрибут следует записывать так

< img data- lazy = " images/slaid.jpg" >

Плавное переключение без перемещения Особенность такого слайдера заключается в том, что на экране находится только один слайд, который при переключении постепенно переходит в следующий. Эффект основан на принципе плавного увеличения прозрачности. То есть выбирается определенный временной отрезок, в течении которого прозрачность первого слайда изменяется от 0% до 100%, за счет чего становится видным следующий слайд. Скрипт такого слайдера будет выглядеть так

$(".fade" ) . slick({ infinite: true , speed: 400 , fade: true , cssEase: "linear" } ) ;

Slick является наиболее универсальным и простым в использовании слайдером на сегодняшний день. Широкий интервал настроек слайдера охватывает великое множество решений реализации слайдеров, что является, наверно, самым весомым преимуществом этого слайдера. Настройка slick slider

аccessibility – начальное значение этого параметра установлено как true, он отвечает за подключения навигационных кнопок для слайдера – это стрелки вперед и назад, а также кнопки в виде точек.
adaptiveHeight – применяется только к одиночному слайдеру, у которого будет изменятся высота родительского контейнера в зависимости от высоты слайдера. В начальных условиях настройка не подключена.
autoplay – настраивает перелистывание слайдов в автоматическом режиме, без вмешательства пользователя. Стандартное значение этой настройки соответствует false.
autoplaySpeed – этот параметр является вспомогательным для autoplay и устанавливает промежуток времени, по истечении которого будет осуществлено автоматическое перелистывание слайда. Изначально для него прописано значение 3000 миллисекунд.
arrows – подключает к слайдеру стрелки вперед и назад. С помощью таблицы внешних стилей можно изменять положение и внешний вид этих стрелок.
asNavFor – устанавливает навигационную связь между двумя слайдерами посредством идентификатора или класса. В начальных условиях параметр соответствует нулевому значению.
prevArrow – позволяет изменить внешний вид стандартной навигационной стрелки, которая отлистывает предыдущий слайд.
nextArrow – аналогичен функциям предыдущему параметру, но отвечает за стрелку, переключающую слайд вперед.
centerMode – фиксирует текущий слайд по центру родительского контейнера, изначально параметр выключен.
centerPadding – при включенном центральном режиме показа текущего слайда (предыдущий параметр) устанавливает для этого слайда внутренний отступ, что визуально позволяет увеличивать текущий слайд.
cssEase – отвечает за анимацию переключения картинок, может делать ее плавной или более резкой. Принимает стандартное значение "ease".
customPaging – позволяет вставлять собственный шаблон для просмотра слайдера.
dots – подключает точки-переключатели, по умолчанию находится в выключенном состоянии.
draggable – подключает возможность перелистывания слайдов зажатием мышки. То есть, если навести на слайдер курсор мыши, зажать ее и передвинуть в сторону, то и слайд переключится на следующий.
fade – создает эффект затухания слайда при переключении, анимационный эффект.
focusOnSelect – фокусирует заданный элемент слайдера.
easing – позволяет установить особый анимационный режим при переключении картинок.
edgeFriction – отключает переключение слайдов на последнем элементе. Срабатывает только в том случае, если слайдер не зациклен.
infinite – зацикливает показ слайдов. Это значит при переключении последней картинки слайд-шоу начнется сначала.
initialSlide – определяет картинку, с которой начнется показ слайд-шоу. По умолчанию слайдер для старта выбирает первое по порядку изображение.
lazyLoad – позволяет установить режим подгрузки следующих слайдов. Доступно только 2 значения для настройки: "ondemand" и "progressive", причем последнее является значением по умолчанию.
pauseOnHover – останавливает перелистывание слайдов при наведении курсора мыши на тело слайдера. Работает, только если определено автоматическое переключение слайдов.
pauseOnDotsHover - останавливает перелистывание слайдов при наведении курсора мыши на точечные переключатели. Работает, только если определено автоматическое переключение слайдов.
respondTo – вызывает реакцию на изменения ширины окна браузера. Для использования доступны три значения: "window", "slider" или "min".
responsive – позволяет адаптировать настройки слайдера под ширину экрана. Отличается от предыдущей настройки тем, что ограничение ширины определяется точным значением в пикселях. Используется для адаптивной верстки под мобильные устройства.
slidesToShow – позволяет установить количество картинок, выводимых в видимой зоне. Изначально показывается 1 слайд, но этим значением можно варьировать.
slidesToScroll – сообщает слайдеру сколько нужно поменять картинок при переключении.
speed – фиксирует скорость, с которой будет осуществляться переключение слайдов.
variableWidth – адаптирует ширину контейнеров слайдера под ширину каждой показываемой картинки.

UPD: Попробовала создать слайдер по этому уроку и оказалось, что он очень неполный.
Дополняю.

1. Скачиваем репозиторий здесь https://github.com/kenwheeler/slick
2. В файле index.html перед открывающим подключаем стили слайдера:

Перед закрывающим подключаем скрипты

Ещё этот слайдер требует шрифты. Папку fonts из папки слайдера нужно поместить в папку css проекта.
И ещё в папке слайдера нужно найти рисунок ajax-loader.gif и в файле slick-theme.css прописать путь к нему

3. Теперь диву-обёртке слайдера присваиваем класс, например, multiple-items
А в файле script.js пишем код

$(document).ready(function(){
$(".multiple-items").slick({
autoplay: false,
autoplaySpeed: 6000,
arrows: true,
infinite: true,
dots: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1
});
});

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

5. Хорошо. Теперь, по моей задумке, центральный слайд слайдера должен отличаться от боковых.
пишут, что достаточно прописать в коде

$(".middle").slick({
centerMode: true,
//центруем текущий слайд
centerPadding: "50px",
//слегка увеличиваем текущий слайд
slidesToShow: 3
//выводим 3 слайда для просмотра
});

Чтобы увеличить размер центрального слайдера. На самом деле такой способ не работает
Увеличила центральный слайд стилем
.slick-center {
background-color: #8cc63f;
transform: scale(1.3);
}

Привет всем и сегодня я расскажу про очень классный, а главное простой слайдер - slick .

Зайдите на сайт http://kenwheeler.github.io/slick/ Там вы сможете найти очень много примеров работы слайдера slick . У данного слайдера правда очень много самых разных эффектов и, также, есть прокрутка мышкой. Т.е. вы можете нажать на какой-нибудь элемент в слайдере левой кнопкой мышки и, удерживая ее, перемотать слайдер влево или вправо. Эта функция не совсем полезна для компьютеров, но на смартфонах и планшетах - самое то!

Итак, чтоб его подключить, скачайте файлы с сайта, данного выше. Теперь создадим html и подключим необходимые компоненты, в частности jquery , т.к. слайдер использует эту библиотеку для своей работы.

your content
your content
your content

Подключите стили

И подключите скрипты

Чтобы инициализировать слайдер, в теге script пропишите следующее:

$(".your-class").slick({
setting-name: setting-value
});
});

В конечном итоге ваш html файл будет выглядеть примерно так:

Slick

your content
your content
your content

$(document).ready(function(){
$(".your-class").slick({
setting-name: setting-value
});
});

У данного слайдера немало установок, которые вы можете задать сами. Найти их все вы можете все на том же сайте внизу страницы в табличке. Задавать их стоит при инициализации в объекте.

$(document).ready(function(){ $(".your-class").slick({ autoplay: true; }); });

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

Итак, как вы можете видеть, слайдер очень прост в установке и настройке, но позволяет делать по-правде шикарные вещи. Спасибо за внимание и до скорого!