Как в slick сделать dots в таким счетчиком?

Question

[ximikos]

подскажите пожалуйста, как можно сделать счетчик слайдов по обе стороны dots. как на скриншоте

Answer 1

[Николай Миронов]

Здравствуйте,
У меня получилось реализовать подобный счетчик.
1) Инициализируем слик-слайдер
2) Добавляем элементы current-nav и max-nav внутрь навигации слайдера
3) Добавляем листенер, который будет срабатывать при смене слайда, в нем меняем значение current slide

Можно посомтреть результат на CodePen: https://codepen.io/solidcreature/pen/GRNKmQj

Comments

[ximikos]

спасибо, выстроить так получилось. но у меня никак не получается сделать что бы отсчет был 01 02 03 и тд...
не подскажите как быть?

[Николай Миронов]

Обновил код на кодпен, вывод номера слайда теперь так:

let slide_num = currentSlide+1;
  if (slide_num < 10) { slide_num = '0' + slide_num; }
  $('.nav-current').text(slide_num);

[ximikos]

спасибо за помощь!!))

[ximikos]

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

Answer 2

[Антон Литвиненко]

Разметка для вывода
<span class="paging-info"></span>
В ней появятся еще спаны

<span class="current"></span>
<span class="total"></span>

var $pagingInfo = $('.paging-info');
var $teamSlider = $('.team-slider');

$teamSlider.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
	var i = (currentSlide ? currentSlide : 0) + 1;
	var prefix = i < 10 ? '0' : '';
	var prefixAll = slick.slideCount < 10 ? '0' : '';
	$pagingInfo.html('<span class="current">' + prefix + i + '</span>' + '' + '<span class="total">' + prefixAll + slick.slideCount + '</span>');
});

ну и собственно инициализациия самого слайдера далее

Comments

[ximikos]

спасибо за помощь!!))