Jquery NivoSlider 슬라이더가 작동하지 않습니다. $ ('# slider'). nivoSlider(); 함수가 아닙니다.

내 asp.net 응용 프로그램에서 nivo jquery 이미지 슬라이더를 사용하고 있지만 이미지를 변경하지 않고 jQuery 디버깅 중 "loading.gif"이미지 만 표시하면로드 후 오류 메시지가 나타납니다. $ ('#slider'). nivoSlider(); 함수가 아닙니다.

어쩌면 jQuery로 충돌이, 그래서 .noConflict()을 사용합니다 :

<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>

출처

2012-06-14 Gaurav

는 슬라이더에 대한 적절한 JS 파일을로드하는 확실한가요? –

한 페이지에 두 개의 슬라이더를 사용하고 있습니까? 다른 HTML 마크 업을 게시 할 수 있습니까? 만약 둘 다 동일한 초기화 코드를 사용한다면 두 ID가 같기 때문에 (# 슬라이더) – martincarlin87

이 시도 내가 모든 이제 다음 Visual Studio를 사용하고있을 때

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

출처

2012-06-14 15:32:11

고맙습니다. @Andrea! 그것은 효과가 있었다. – Gaurav

나는이 문제를 얻는다. body에있는 스크립트를 참조하는 대신 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>

이것은 특히 jQuery에도 문제가 있습니다.

그러나 문서 준비 기능에 자바 스크립트를 넣어해야합니다

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

출처

2012-06-14 15:33:01

Jquery NivoSlider 슬라이더가 작동하지 않습니다. $ ('# slider'). nivoSlider(); 함수가 아닙니다.

답변

관련 문제