CODEWITHSUNDEEP
javascriptjqueryhtmlcss
GeorgeGeorgitsis
GeorgeGeorgitsis

Reputation: 1262

Nivo slider not working properly at first time sometimes

I have a website. Some pages have a slider, others not. I have this issue with nivo slider. Sometimes, can't figure out when, the slider isn't loading, so no image is shown. If you click again the same page, the slider is loading correctly and everything works fine. The problem is not standard, you have to try it many times by navigating to all pages. Please check it out, spend 1-2 minutes by visiting from the menu bar all pages so you can see the problem. The problem is more often with chrome - IE. The link is here http://www.secureshop.gr/POOL/citycars/website

Thank you in advance.

Upvotes: 0

Views: 962

Answers (1)

Nicholas Hazel
Nicholas Hazel

Reputation: 3750

Perhaps load your script for Nivo at the BASE of the body to ensure it doesn't run in the head and cause any sort of timeout issues.

As soon as the DOM understands that there is an img, it will continue, and that image will load in the meantime while it progresses down the rest of your HTML. Perhaps all of the imgs aren't downloading, hence the Nivo Slider not rendering it properly.

<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script>
    $('#slider').nivoSlider({
        effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 5000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: true, // Next & Prev navigation
        directionNavHide: true, // Only show on hover
        controlNav: false, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel: true, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav: true, // Use left & right arrows
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        captionOpacity: 0.8, // Universal caption opacity
        prevText: '', // Prev directionNav text
        nextText: '', // Next directionNav text
        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
    });
</script>
</body>

Upvotes: 1

Related Questions