Як у Slick Slider змінити точки пагінації слайдів на цифри

Привіт:) У цьому короткому пості покажу, як у 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>';
		},
	});
});

В результаті:

Михайло Петров
Михайло Петров

Мене звати Михайло. Я — WordPress-розробник. Створюю візитки, корпоративні сайти, блоги на WordPress.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *