在幻燈片滾動條中更改導航

Question

我有這個幻燈片滾動條，它工作正常。但是，我想改變導航的外觀。這是我現在所擁有的原始示例 - see jsfiddle。

我想將導航改爲「< < x out of y >>」，其中「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編寫一個新類。你必須編寫一個函數來更新新的佈局。