CODEWITHSUNDEEP
javascriptjqueryasp.netslider
Kumar Gaurav
Kumar Gaurav

Reputation: 939

Jquery NivoSlider Slider is not working $('#slider').nivoSlider(); is not a function

I am using nivo jquery image slider in my asp.net application, but after page load its not changing the images and only showing "loading.gif" image, on jquery debugging i am getting error message : $('#slider').nivoSlider(); is not a function.

   <link href="css/NivoSlideThemes/default/default.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="css/NivoSlideThemes/nivo-slider.css" rel="stylesheet" type="text/css" media="screen"  />
    <script src="js/menu/jquery-1.7.2.min.js" type="text/javascript"></script>     
    <script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(window).load(function () {
            $('#slider').nivoSlider();
        });
        </script>
          <style>   

            .theme-default #slider {
                margin:1px auto 0 auto;
                width:674px; /* Make sure your images are the same size */
                height:311px; /* Make sure your images are the same size */
            }
            .theme-pascal.slider-wrapper,
            .theme-orman.slider-wrapper {
               /* margin-top:150px;  */
            }

            .clear {
                clear:both;
            }

      </style> 

       <div class="slider-wrapper theme-default"> 
            <div id="slider" class="nivoSlider">
                <img src="images/cfgSliderImages/1.gif" alt="" />
                <img src="images/cfgSliderImages/2.gif" alt="" title="Solar Power" />
                <img src="images/cfgSliderImages/3.gif" alt="" data-transition="slideInLeft" />
                <img src="images/cfgSliderImages/4.gif" alt=""   title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
        </div>

Upvotes: 3

Views: 15137

Answers (2)

David East
David East

Reputation: 32604

I get this problem when I'm using Visual Studio every now and then. Instead of referencing the scripts in the body, I add them in the head.

<head>
    <link href="css/NivoSlideThemes/default/default.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="css/NivoSlideThemes/nivo-slider.css" rel="stylesheet" type="text/css" media="screen"  />
    <script src="js/menu/jquery-1.7.2.min.js" type="text/javascript"></script>     
    <script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
</head>

This has especially been a problem with jQuery as well.

However, you need to put your javascript in the document ready function:

// When the page is ready to be manipulated
$(function() {
        $(window).load(function () {
            $('#slider').nivoSlider();
        });
});

Upvotes: 0

Andrea Turri
Andrea Turri

Reputation: 6500

Try this:

Maybe there is a conflict with jQuery, so use .noConflict():

var j = jQuery.noConflict();
j(document).ready(function () {
    j('#slider').nivoSlider();
});

Upvotes: 10

Related Questions