@ximikos

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

6011663c5c4ae421899915.jpeg
подскажите пожалуйста, как можно сделать счетчик слайдов по обе стороны dots. как на скриншоте
  • Вопрос задан
  • 50 просмотров
Решения вопроса 2
solidcreature
@solidcreature
WordPress-митапы в Москве (vk.com/wpmeetup)
Здравствуйте,
У меня получилось реализовать подобный счетчик.
1) Инициализируем слик-слайдер
2) Добавляем элементы current-nav и max-nav внутрь навигации слайдера
3) Добавляем листенер, который будет срабатывать при смене слайда, в нем меняем значение current slide

Можно посомтреть результат на CodePen: https://codepen.io/solidcreature/pen/GRNKmQj
Ответ написан
AntonLitvinenko
@AntonLitvinenko
HTML coder
Разметка для вывода
<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>');
});

ну и собственно инициализациия самого слайдера далее
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы