Disable 'Previous' button on 1st slide? Nivoslider

Question

I'm using Nivoslider for a web project I am working on.

As you can see from the above link, the "prev" button displays even when on the 1st slide.

Is it possible I can make NivoSlider "linear" and only display the previous button if the slide number is greater than 0 ?

It seems NivoSlider is set up as 'infinite' or 'circular' by default, but I'm sure there must be a way to alter this.

Many thanks for any help with this :-)

Answer 1

You could use a custom afterChange function when you initialize the slider.

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();
    }
});