On page load, instead of displaying first slide, last slide gets displayed for around less than a second

Question

I am using a NivoSlider and coming across this issue:

When page loads, instead of displaying first slide (as I have set startSlide : 0), last slide (or sometimes some other image from the set of images) gets displayed for around less than a second.

I believe, slider hasn't properly started by then, because when the slider actually starts control is seen coming on the first bullet only.

Following is the code that I have:

    n.fn.nivoSlider.defaults = {
    effect : "sliceDownRight",
    slices : 15,
    boxCols : 8,
    boxRows : 4,
    animSpeed : 500,
    pauseTime : 5e3,
    startSlide : 0,
    directionNav : !0,
    controlNav : !0,
    controlNavThumbs : !1,
    pauseOnHover : !0,
    manualAdvance : !1,
    prevText : "Prev",
    nextText : "Next",
    randomStart : !1,
    overflow : "hidden",
    beforeChange : function () {},
    afterChange : function () {},
    slideshowEnd : function () {},
    lastSlide : function () {},
    afterLoad : function () {}

};

Can anyone please let me know why this might be happening?

Answer 1

I did the following changes to my code in the respective .cshtml file:

(1) Changes to load function:

Original:

$(window).load(function () {
    $('#nivo-slider').nivoSlider();
});

Modified:

$(window).load(function () {
    //$('#nivo-slider').nivoSlider();

    /*show() is needed to avoid the issue of last slide getting 
    displayed on page load */
    $('#nivo-slider').show().nivoSlider({
    effect: 'sliceDownRight',
    slices: 15,
    boxCols: 8,
    boxRows: 4,
    animSpeed: 500,
    pauseTime: 5e3,
    startSlide: 0, 
    startSlide : 0,
    directionNav : !0,
    controlNav: !0,
    controlNavThumbs: !1,
    pauseOnHover: !0,
    manualAdvance: !1,
    prevText: "Prev",
    nextText: "Next",
    randomStart: !1,
    overflow: "hidden",
    beforeChange: function () { },
    afterChange: function () { },
    slideshowEnd: function () { },
    lastSlide: function () { },
    afterLoad: function () { }
    }); 
});

(2) Changes to the opening tag for the div element for the slider:

Original:

<div id="nivo-slider" class="nivoSlider">

Modified:

<div id="nivo-slider" class="nivoSlider" style="display: none">