Slick Slider - Кастомные кнопки и пагинация слайдов

Slick Slider — Кастомные кнопки и пагинация слайдов

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

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

От слов сразу к примеру

Кастомная пагинация Slick Slider

$('.party-news-sliders-block').slick({
customPaging: function (slider, i)
{
return i + 1;
},
dots:true,
appendDots:$('.party .news-slider-btns .party-news-dots,
.party .news-slider-btns2 .party-news-dots'),
});

Этот кусок кода показывает как заставить слайдер выводить кнопки пагинации в нужном месте и вместо маленьких точек будет выводится номер слайда — этому способствует
customPaging. А в свойстве appendDots указываем блоки в которые будет выводится пагинация. После этого с помощью CSS видоизменяем элементы списка под свои нужды .

Кастомные кнопки перелистывания слайдов в Slick Slider

Тут все еще проще

$('.news-slider-btns .next-news').click(function(){
slickk.slick('slickNext');
});

Ну и все)


Добавить комментарий