Slick — лучший адаптивный слайдер для сайта

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

• Подключение
• Примеры использования
• Адаптивность
• Настройки
• Методы
• События

Скачать Slick slider 1.8.1

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

    // если ещё не подключен jQuery
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    
    <script src="/slick/slick.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="/slick/slick-theme.css"/>

Подготавливаем разметку. Для этого каждый слайд оборачиваем в «div», внутри которого будет какое-то содержимое:

<div class="slider single-item">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

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

Рассмотрим примеры вызова «Slick slider» с разными настройками.

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

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

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

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

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

    $('.multiple-items').slick({
      infinite: true,
      dots: true,
      slidesToShow: 3,
      slidesToScroll: 1
    });

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

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

    $('.center').slick({
      centerMode: true,
      slidesToShow: 3,
    });

Адаптивность

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

$('.slick-example').slick({
	infinite: true,
	dots: true,
	slidesToShow: 3,
	slidesToScroll: 1,
	responsive: [
	    {
	      breakpoint: 768,
	      settings: {
	        slidesToShow: 2,
	      }
	    },
	    {
	      breakpoint: 480,
	      settings: {
	        slidesToShow: 1,
	      }
	    }
    ]
});

Здесь по умолчанию устанавливается отображение в ряд 3 слайда. Если ширина видимой области браузера от 768 до 481 пикселя — 2. И один, если ширина менее 480 пикселей.

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

Настройки

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

Методы

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

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

$('.single-item').slick('slickCurrentSlide');

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

$('.single-item').slick('slickGoTo',4);

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

$('.single-item').slick('slickNext');

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

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

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

События

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

$('#slick-slider').on('afterChange', function(event, slick, currentSlide){
  if (currentSlide == 5) { 
    console.log('Осуществлён переход к 5-му слайду'); 
  }
});

«beforeChange» срабатывает перед переходом к другому слайду:

$('#slick-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log('Собираемся осуществить переход к '+nextSlide+' слайду');
});