Search code examples
twitter-bootstrapnivo-slider

NivoSlider not working in Bootstrap site


For some reason the NivoSlider is not working on this page, I have tried finding a fix but I cant seem to figure out why its not working.. Please see link: http://wsieworksstaging.com/kww/about-us.html


Solution

  • You've got this code at the top of your page:

    $(window).load(function() {
        $('#slider').nivoSlider({
            startSlide:0, //Set starting Slide (0 index)
            slideshowEnd: function(){$('#slider').data('nivo:vars').stop = true;} 
        });
    });
    

    The problem is that you aren't loading the jQuery library or the NivoSlider library until near the end of your page. Because of this, the Javascript engine in your browser doesn't know what a $ means or what nivoSlider means. You need to move this code thats at the top of your page to somewhere below where you are loading jQuery and Nivo.

    EDIT

    I think you are having a jQuery conflict man. Try this code instead:

    var j = jQuery.noConflict();
    j(window).load(function() {
        j('#slider').nivoSlider({
            startSlide:0, //Set starting Slide (0 index)
            slideshowEnd: function(){$('#slider').data('nivo:vars').stop = true;} 
        });
    });