更改幻灯片卷轴中的导航

Question

我有这个幻灯片卷轴，工作正常。但是，我想改变导航的外观。这是我现在所拥有的一个原始示例 - see jsfiddle。

我想将导航更改为“＆lt;＆lt; x out of y＆gt;＆gt;”其中'x'是当前幻灯片，'y'是幻灯片的总数。

我认为脚本中存在所有必要的变量 - 我无法让它看起来像我想要的那样工作。

我试图改变这行代码：

scrollMenu.append('<div class="' + ((i == 0) ? activeClass : '') + ' slide-button slide-index">' + i + '</div>');

......但我无法让它发挥作用。 此外，幻灯片的数量从零开始。我想我需要在某处添加+1。我只是看不到哪里。

有人想帮忙吗？

Answer 1

在您提到的行中查看您的代码，您可以使用scrollMenuSlideItemsNum，它看起来像当前页面，并且您有numSlides这是幻灯片的数量。因此，不要循环，只需删除for并添加类似

的内容

"<< " + scrollMenuSlideItemsNum + " of " + numSlides + " >>"

但你必须改变其他一些事情。您必须更改单击处理程序，以便在单击不同部分时它的工作方式不同。你必须为你要追加的div写一个新类。您必须编写一个函数来更新新布局。