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

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

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

<link rel="stylesheet" type="text/css" href="путь от корня вашего сайта/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="путь от корня вашего сайта/slick/slick-theme.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="путь от корня вашего сайта/slick/slick.min.js"></script>

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

<div class="single-slide">
 	<div>Слайд1</div>
        <div>Слайд2</div>
        <div>Слайд3</div>
</div>

<div>Слайд1</div>

<div>Слайд2</div>

<div>Слайд3</div>

</div>

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

<script>
  $('.single-slide').slick({
    
  });
</script>

$('.single-slide').slick({

});

</script>

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

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

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

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

1	$('.single-slide').slick();

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

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

$('.multiple-items').slick({
  slidesToShow: 3, //сколько слайдов показывать в карусели
  slidesToScroll: 3 // сколько слайдов прокручивать за раз
});

$('.multiple-items').slick({

slidesToShow: 3, //сколько слайдов показывать в карусели

slidesToScroll: 3 // сколько слайдов прокручивать за раз

});

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

$('.multiple-items').slick({
  slidesToShow: 3,  
  slidesToScroll: 3, 
  responsive: [
    {
      breakpoint: 865,
      settings: {
       slidesToShow: 2,
       slidesToScroll: 2
     },{
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
    }] 

});

$('.multiple-items').slick({

slidesToShow: 3,

slidesToScroll: 3,

responsive: [

{

breakpoint: 865,

settings: {

slidesToShow: 2,

slidesToScroll: 2

},{

breakpoint: 480,

settings: {

arrows: false,

centerMode: true,

centerPadding: '40px',

slidesToShow: 1

}

}]

});

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

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

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

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

$('.variable-width').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  centerMode: true,
  variableWidth: true
});

$('.variable-width').slick({

dots: true,

infinite: true,

speed: 300,

slidesToShow: 1,

centerMode: true,

variableWidth: true

});

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

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

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

<img data-lazy="/img/gallery1.png"/>

1	<img data-lazy="/img/gallery1.png"/>

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

$('.lazy').slick({
  lazyLoad: 'ondemand',
  slidesToShow: 3,
  slidesToScroll: 1
});

$('.lazy').slick({

lazyLoad: 'ondemand',

slidesToShow: 3,

slidesToScroll: 1

});

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

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

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

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

$('.slider-for').slick({

slidesToShow: 1,

slidesToScroll: 1,

arrows: false,

fade: true,

asNavFor: '.slider-nav'

});

$('.slider-nav').slick({

slidesToShow: 3,

slidesToScroll: 1,

asNavFor: '.slider-for',

dots: true

});

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

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

Для данного слайдера существует возможность дополнения параметров слайдера через HTML-код посредством атрибута data-slick.

<div class="single-slide" data-slick='{"dots": true}'>
<div class="single-slide"><img src="/img/gallery2.jpg" alt="" /></div>
<div class="single-slide"><img src="/img/gallery4.jpg" alt="" /></div>
<div class="single-slide"><img src="/img/gallery3.jpg" alt="" /></div>
</div>

</div>

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

а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 – адаптирует ширину контейнеров слайдера под ширину каждой показываемой картинки.

Как найти и удалить вирусы на сайте?

Вставка включаемых областей в Битрикс

Интеграция верстки в WordPress

Как сделать бэкап сайта и восстановиться из копии?

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

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

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

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

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

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

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

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