jQueryイメージスライダがjQuery-cycle（ASP.NET）で動作しない

Question

ASP.NET WebアプリケーションでjQueryを使用して義務的なイメージスライダを実装しようとしています。私は最初の画像を見ることができますが、次のボタンまたは前のボタンを押すと機能しません。

jQuery.cycleプラグインもインストールしましたが、何が問題なのか分かりません。 jQueryサイクルと別のプラグインが必要ですか？

Htmlの

<div id="slider-nav"> 

     <div id="next">&rang;</div> 
     <div id="prev">&lang;</div> 

     <div id="slider"> 
      <img src="~/img/img1.jpg" alt="image"> 
      <img src="~/img/img2.jpg" alt="image"> 
      <img src="~/img/img3.jpg" alt="image"> 
     </div> 
    </div> 

CSS

<style type="text/css"> 

    #slider-nav{ 
     width: 700px; 
     height: 280px; 
     position: relative; 
     margin: 50px auto; 
    } 

    #slider{ 
     width: 700px; 
     height: 280px; 
     position: absolute; 
     overflow: hidden; 
    } 

    #next { 
     text-align: center; 
     line-height: 50px; 
     color: white; 
     width: 50px; 
     height: 50px; 
     background-color: black; 
     position: absolute; 
     top: 120px; 
     right: 0; 
     z-index: 99; 
     cursor: pointer; 
     opacity: 0; 
    } 

    #prev { 
     text-align: center; 
     line-height: 50px; 
     color: white; 
     width: 50px; 
     height: 50px; 
     background-color: black; 
     position: absolute; 
     top: 120px; 
     left: 0; 
     z-index: 99; 
     cursor: pointer; 
     opacity: 0; 
    } 

    #slider-nav:hover #next { 
     opacity: 1; 
     transition: all .5s ease-out; 
     -webkit-transition: all .5s ease-out; 
    } 

    #slider-nav:hover #prev { 
     opacity: 1; 
     transition: all .5s ease-out; 
     -webkit-transition: all .5s ease-out; 
    } 
    </style> 

Javascriptを

<script type="text/javascript" src="~/Scripts/jquery-3.1.1.js"></script> 
<script type="text/javascript" src="~/Scripts/jquery.cycle.all.js"></script> 
<script type="text/javascript" src="~/Scripts/jquery.cycle.all.min.js"></script> 

<script type="text/javascript"> 

    $('#slider').cycle({ 
     fx: 'scrollHorz', 
     next: '#next', 
     prev: '#prev', 
     timeout: 3000, 
     pause: 1 
    }); 
</script> 

Answer 1

重複を削除（。.minは、スクリプトの縮小さバージョンを意味する）

あなたはすでにそれが呼ばれている

そして準備ができてブロックに

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#slider').cycle({ 
     fx: 'scrollHorz', 
     next: '#next', 
     prev: '#prev', 
     timeout: 3000, 
     pause: 1 
    }); 
}); 
</script> 

---

をあなたの呼び出しをラップUPDATE： 私はスニペットを作成あなたの正確なコードを使用してください。それは完全に動作します。 これは、他のスクリプトが干渉していることを示します。

$('#slider').cycle({ 
 
     fx: 'scrollHorz', 
 
     next: '#next', 
 
     prev: '#prev', 
 
     timeout: 3000, 
 
     pause: 1 
 
    });

#slider-nav{ 
 
     width: 700px; 
 
     height: 280px; 
 
     position: relative; 
 
     margin: 50px auto; 
 
    } 
 

 
    #slider{ 
 
     width: 700px; 
 
     height: 280px; 
 
     position: absolute; 
 
     overflow: hidden; 
 
    } 
 

 
    #next { 
 
     text-align: center; 
 
     line-height: 50px; 
 
     color: white; 
 
     width: 50px; 
 
     height: 50px; 
 
     background-color: black; 
 
     position: absolute; 
 
     top: 120px; 
 
     right: 0; 
 
     z-index: 99; 
 
     cursor: pointer; 
 
     opacity: 0; 
 
    } 
 

 
    #prev { 
 
     text-align: center; 
 
     line-height: 50px; 
 
     color: white; 
 
     width: 50px; 
 
     height: 50px; 
 
     background-color: black; 
 
     position: absolute; 
 
     top: 120px; 
 
     left: 0; 
 
     z-index: 99; 
 
     cursor: pointer; 
 
     opacity: 0; 
 
    } 
 

 
    #slider-nav:hover #next { 
 
     opacity: 1; 
 
     transition: all .5s ease-out; 
 
     -webkit-transition: all .5s ease-out; 
 
    } 
 

 
    #slider-nav:hover #prev { 
 
     opacity: 1; 
 
     transition: all .5s ease-out; 
 
     -webkit-transition: all .5s ease-out; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://malsup.github.com/jquery.cycle.all.js"></script> 
 

 
<div id="slider-nav"> 
 

 
     <div id="next">&rang;</div> 
 
     <div id="prev">&lang;</div> 
 

 
     <div id="slider"> 
 
      <img src="//placehold.it/250x250/ff00ff" alt="image"> 
 
      <img src="//placehold.it/250x250/0000ff" alt="image"> 
 
      <img src="//placehold.it/250x250/00ff00" alt="image"> 
 
     </div> 
 
    </div>