Qudrat Qodirov

Slick slider1 min read

Slick slider — это jquery плагин для быстрого создания на сайте адаптивного слайдера любой сложности. Его функционал позволяет реализовать зацикливание, автопроигрывание, эффект перехода, динамическое добавление слайдов и многое другое. Отдельно выделю возможность пролистывания слайдера пальцем на мобильных устройствах.

Скачать Slick slider 1.8.1

Подключение «slick slider» осуществляется следующим образом.

Jquery подгружаем только если на сайте его ещё нет.

Каждый слайд оборачивается в «div», внутри которого может быть любое содержимое:

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

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

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

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

 

один слайд с навигационными стрелками

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

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

выводим 3 слайда с параметрами зацикленной прокрутки

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

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

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

Адаптивный слайдер

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

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

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

Настройка slick slider

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

ПАРАМЕТРТИПDEFAULTОПИСАНИЕ
adaptiveHeightbooleanfalseВключает адаптирование высоты для одиночкного слайда горизонтальной карусели
autoplaybooleanfalseАвтоматическая прокрутка
autoplaySpeedint(ms)3000Скорость автопрокрутки в милисекундах
arrowsbooleantrueПоказ/скрытие навигационных кнопок
prevArrowhtmlbuttonЗамена стандартной кнопки Preview
nextArrowhtmlbuttonЗамена стандартной кнопки Next
dotsbooleanfalseПоказ/скрытие навигационных точек под слайдером
draggablebooleantrueВключает/выключает способность перелистывания слайдера перетаскиванием мышью
fadebooleanfalseЭффект затухания при перелистывании слайдов
focusOnSelectbooleanfalseУстанавливает фокус на выбранный элемент карусели при клике
easingstring‘linear’Анимационные эффекты перехода, их набор зависит от подключенных jQuery Easing плагинов
edgeFrictioninteger0.15Сопротивление при попытки прокрутить карусель, когда дальше нет слайдов и она не зацилена
infinitebooleantrueБесконечное прокручивание (зацикливание)
initialSlideinteger0Номер слайда, с которого начинать показ
lazyLoadstring‘ondemand’Тип подгрузки слайдов. Принимает ‘ondemand’ или ‘progressive’
pauseOnHoverbooleantrueПауза автопроигрывания при наведении мыши
pauseOnDotsHoverbooleanfalseПауза автопроигрывания при наведении мыши на навигационные точки
pauseOnHoverbooleantrueПауза автопроигрывания при наведении мыши
rowsint1Может быть ‘window’, ‘slider’ или ‘min’

Методы слайдера

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

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

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

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

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

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

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

События Slick slider

На некоторые события слайдера можно устанавливать свои обработчики. Например, после прокрутки к 5 слайду мы должны сделать какое-то действие. Для этого включаем обработчик события «afterChange».

Если действие следует совершить перед осуществлением перехода, то задействуем событие «beforeChange».

 

Источник: realadmin.ru

Обсуждение закрыто.

%d такие блоггеры, как: