наверх

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

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

скачать Slick слайдер

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

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

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

Возможные конфигурации слайдера



Одиночный слайд

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

Адаптивная карусель

Для реализации карусели в вызов следует добавить настройку slidesToShow, которая указывает по сколько слайдов показывать в карусели за раз :

Для slick-карусели есть возможность настроить вывод определенного количества слайдов в зависимости от значения ширины экрана. Реализовать это можно c помощью параметра breakpoint:

Где breakpoint — это ширина при которой следует включать настройки.

Разная ширина и высота для слайдов

Слайдер Slick дает возможность создавать карусели с элементами разной ширины:

Для создания слайдера с картинками разной ширины используйте настройку variableWidth:

Для того чтобы с помощью Slick создать карусель с элементами разной высоты:

Hello world!

Hello world!

Hello world!

Отложенная загрузка изображений

Для того чтобы использовать отложенную загрузку изображений в слайдере Slick, следует заменить атрибут src на data-lazy:

В вызове слайдера необходимо использовать настройку lazyLoad со значением ‘ondemand’:

Слайдер с превью

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

Для реализации такого слайдера необходимо, вызвать одиночный слайдер и карусель отдельно, связав их с помощью настройки ‘asNavFor’:

Где  ‘.slider-nav’ это одиночный  слайд, а .slider-for карусель выполняющая вывод превью.

Настройки слайдера

Для данного слайдера существует возможность дополнения параметров слайдера через HTML-код посредством атрибута data-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 – адаптирует ширину контейнеров слайдера под ширину каждой показываемой картинки.
JavaScript, Slider