CODEWITHSUNDEEP
javascriptjqueryimageslidernivo-slider
Nath5
Nath5

Reputation: 1655

Nivo Slider - Stop animation when only one image

I am using the jQuery plugin for Nivo Slider and need to find a way to stop it from transitioning when only one image exists.

Upvotes: 2

Views: 4399

Answers (3)

benb
benb

Reputation: 783

None of the answers quite worked for me, because I still wanted a single image to display with a caption. I ended up using slightly different options to initialise the nivoSlider depending on the number of images (my images were in a containing div with the id 'hero-images'):

            var numImages = $('#hero-images img').length;

            if (numImages === 0) {
                //No images - hide the block
                $('#hero-images').hide();
            } else if (numImages === 1) {
                // 1 image - disable controls and set to manual advance to prevent animation
                $('#hero-images').nivoSlider({
                    directionNav: false,
                    manualAdvance: true,
                    controlNav: false
                });
            } else {
                // Multiple images, set up as normal
                $('#hero-images').nivoSlider({
                    effect: 'fade',
                    directionNav: false
                });
            }

Upvotes: 0

eoto
eoto

Reputation: 63

There is probably a better way to do it but it works for me:

if($('#slider img').length == 1) {
    $('#slider').nivoSlider({});
    $('.nivo-controlNav').css('display', 'none');
    $('.nivo-directionNav').css('display', 'none');
    $('#slider').data('nivo:vars').stop = true;
} else {
    $('#slider').nivoSlider({
        effect: 'slideInLeft'
    });
}

PS. It's important to check the number of images before initializing Nivoslider because it seems to duplicate image tags...

Upvotes: 1

Cacho Santa
Cacho Santa

Reputation: 6914

Can you set the option:

manualAdvance: true

Will that help? This is the documentation for the latest NivoSlider update.

If this wont help, can you post the code you are using to enable the slider?

This will be the full code:

$(window).load(function() {
    $('#slider').nivoSlider({
        slices: 1, // For slice animations
        startSlide: 0, // Set starting Slide (0 index)
        manualAdvance: true, // Force manual transitions
        captionOpacity: 0.8, // Universal caption opacity
        randomStart: false, // Start on a random slide
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});

Upvotes: 1

Related Questions