


Блог IT-шника
Блог IT-шника
Привіт:) У цьому короткому пості покажу, як у Slick Slider замінити точки пагінації слайдів на цифри.
Наприклад, є слайдер:
У ньому присутні точки навігації. Його код на JS:
/**
* Promo Slider (Promo Archive Category)
*/
$(document).ready(function(){
$('.lc-promo-archive-category__news-slider .news__inner').slick({
autoplay: true,
autoplaySpeed: 3000,
cssEase: 'ease-out',
arrows: false,
infinite: true,
dots: true,
});
});
Потрібно точки змінити на номери слайдів. Тому:
/**
* Promo Slider (Promo Archive Category)
*/
$(document).ready(function(){
$('.lc-promo-archive-category__news-slider .news__inner').slick({
autoplay: true,
autoplaySpeed: 3000,
cssEase: 'ease-out',
arrows: false,
infinite: true,
dots: true,
/* Точки замінити на нумерацію.
* Але при цьому не будуть виводитись кружки у слайдері.
*
* https://codepen.io/abianjali00/pen/OjgyNr
* https://itecnote.com/tecnote/javascript-slick-slider-replace-dots-with-numbers/
*/
customPaging: function(slider, i) {
var thumb = $(slider.$slides[i]).data();
return '<a class="dot">'+(i+1)+'</a>';
},
});
});
В результаті: