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