如何在滑块中反驳分页显示

Question

我使用了发生错误的滑块。我想在滑块上展示反分页，但我无法做到这一点。目前的页面/页面总数(如1/4,2/4(的形式。

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

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

Answer 1

您可以修改左右按钮单击功能。也不要忘记相应地更新自动滑块。我也确定您可以在其中的某个地方获取总索引，因此您不必进行编码"/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"部分。我不知道您使用的库，但我想这足以为您提供具有不同来源的"唯一"divs的总数：

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个DIV，但您有3张图像。您还可以在下面的点中看到它(旋转木马中有3个点(。对于上面的左右箭头功能，请在手动之前计算var l = x.length，然后可以做：

document.getElementById("count").textContent = animate.index+"/" + l;

因此，您不必进行硬码。我不得不修改您的滑块，一个工作的小提琴：

https://jsfiddle.net/ibowankenobi/szwr20ec/5/