javascript - 禁用第一张幻灯片上的“上一张”按钮？尼沃斯莱德

Question

我正在将Nivoslider用于我正在处理的 Web 项目。

正如您从上面的链接中看到的那样，即使在第一张幻灯片上也会显示“上一个”按钮。

是否可以使 NivoSlider “线性”并且仅在幻灯片编号大于 0 时才显示上一个按钮？

似乎 NivoSlider 默认设置为“无限”或“圆形”，但我确信必须有一种方法来改变它。

非常感谢您对此的任何帮助:-)

Answer 1

初始化滑块时，您可以使用自定义 afterChange 函数。

var sliderSelector = '#slider'; // Replace with your slider selector
$(sliderSelector).nivoSlider({
    // .. Other config here
    controlNav: true, // This solution relies on this to work
    afterChange: function() {
        // Hide prev button if on first slide
        if ($(sliderSelector + ' .nivo-controlNav .nivo-control:first').hasClass('active'))
            $(sliderSelector + ' .nivo-prevNav').hide();
        else
            $(sliderSelector + ' .nivo-prevNav').show();

        // Hide next button if on last slide
        if ($(sliderSelector + ' .nivo-controlNav .nivo-control:last').hasClass('active'))
            $(sliderSelector + ' .nivo-nextNav').hide();
        else
            $(sliderSelector + ' .nivo-nextNav').show();
    },
    afterLoad: function() {
        // If you have randomStart set to true, then you might check with what slide it started and act accordingly.
        // If you use the default, then this should be all you need
        $(sliderSelector + ' .nivo-prevNav').hide();
    }
});