Вы можете изменить функции щелчка левой и правой кнопок. Также не забудьте обновить автоматический слайдер соответственно. Я также уверен, что вы можете получить общий индекс где-то внутри, чтобы вам не пришлось жестко кодировать часть "/ 4". Обновите следующие функции:
var leftArrow = $('<div>', {'class': 'jislider__left-arrow'}).click(function () {
animate.control(--animate.index);
document.getElementById("count").textContent = animate.index+"/3";
});
var rightArrow = $('<div>', {'class': 'jislider__right-arrow'}).click(function () {
animate.control(++animate.index);
document.getElementById("count").textContent = animate.index+"/3"
});
Этого будет недостаточно, вероятно, вам также не следует жестко кодировать часть знаменателя "/ 4". Я не знаю библиотеку, которую вы используете, но я думаю, этого достаточно, чтобы дать вам общее количество «уникальных» div с другим источником:
var x = Array.prototype.slice.call(document.querySelectorAll(".jislider__img"))
.map(function(d,i){return {node:d,url:getComputedStyle(d).backgroundImage}})
.reduce(function(ac,d,i,a){
!ac.some(function(dd,ii){return dd.url === d.url})
? ac.push(d)
: void(0);
return ac
},[]).map(function(d,i){
return d.node;
})
x.length составляет 3 в вашем случае. Таким образом, хотя у вас есть 5 дел, у вас есть 3 изображения. Вы также можете увидеть это в точках ниже (в вашей карусели есть 3 точки). Для вышеперечисленных функций стрелок влево и вправо вычислите var l = x.length
до руки, а затем вы можете сделать:
document.getElementById("count").textContent = animate.index+"/" + l;
так что вам не нужно жестко его кодировать. Мне пришлось немного изменить твой слайдер, рабочую скрипку:
https://jsfiddle.net/ibowankenobi/szwr20ec/5/