как противостоять пагинации шоу в слайдере - PullRequest
0 голосов
/ 30 апреля 2018

Я использовал ползунок, где я получил ошибку. Я хотел показать встречную нумерацию на слайдере, но я не смог этого сделать. В форме Текущее количество страниц / Общее количество страниц, таких как 1 / 4,2 / 4 и т. Д.

https://codepen.io/anon/pen/WJRqQj

  <div id="credit"><br>Slide No.<span id="count">1/4</span><br></div>

1 Ответ

0 голосов
/ 30 апреля 2018

Вы можете изменить функции щелчка левой и правой кнопок. Также не забудьте обновить автоматический слайдер соответственно. Я также уверен, что вы можете получить общий индекс где-то внутри, чтобы вам не пришлось жестко кодировать часть "/ 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/

...