jqueryの画像スライダをアニメーション化できません

Question

javascript/jqueryを初めて使用しました。イメージスライダを構築しています。画像をアニメーション化するようなことはできません。私はここで何が間違っているのか分からない。

私がやっていることは、アクティブなスライドを取得して次の兄弟をスライドさせてアニメーション化することですが、結果として得られるのは、最初のイメージがアニメーション化して停止することです。ここで

はコードです：https://jsfiddle.net/6qntgg5z/

<div id="container"> 
<header> 
    header is here 
</header> 
<div id="carousel"> 
<div class="sliderbuttons"> 
    <input type="button" name="next" id="next" value=" > "> 
    <input type="button" name="next" id="prev" value=" < "> 
    </div> 
    <div class="slides"> 
     <img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active"> 
     <img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide"> 
     <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide"> 
    </div> 


</div> 

</div> 

CSS

html,body { 
    height: 100%; 
    position: relative; 
} 

*{ 
    box-sizing: border-box; 
} 

#container { 
    width: 90%; 
    margin: 0 auto; 
    height: 100%; 
} 

header { 
    background: black; 
    height: 20px; 
    padding: 1.5em; 
    color: white; 
} 

#carousel { 
    position: relative; 
    margin: 0 auto; 
    width: 45%; 
    margin-top: 15px; 
    height: 100%; 

} 

.slide { 
    position: absolute; 
    max-width: 100%; 
    z-index: 0; 
} 
.sliderbuttons { 
    } 

#prev,#next { 
    position: absolute; 
    background-color: rgba(255, 148, 41, 0.68); 
    box-shadow: 2px white; 
    border:none; 
    font-size: 2em; 
    color: white; 
    font-weight: bold; 
/* font-family: 'Baloo Tamma', cursive; 
*/ padding:10px; 
    top:15%; 
    width: 10%; 
    /*making the prev,next on top of content*/ 
    z-index: 2; 
} 
#prev { 
    left:0; 
} 
#next { 
    right:0; 
     } 

.active { 
    z-index: 1; 
} 

Javascriptを

$(document).ready(function(){ 

    setInterval(animateSlider(), 5000); 
    }); 
    //configuration 
    var currentSlide=activeSlide(); 
    var slides=$("#carousel .slides .slide"); 

    //get active slide index 
    function activeSlide(){ 
     var activeSlide=$("#carousel .slides .active").index(); 
     return activeSlide; 
    } 

    function animateSlider() { 
     var $current=slides.eq(activeSlide()); 
     var $next= $(".slides img:first"); 
     $next.addClass('active'); 

     $current.animate({opacity: 0.0}, 1000, 

      function() { 
        $current.removeClass('active'); 
        $current.css({opacity: 1.0}); 
       }); 

Answer 1

は（何が必要ありませんが、私は考えて、他の欠陥を持っている）、このバイオリンを試してみてください。 <は<と >が>もwww.w3schools.com/html/html_entities.asp

あなたになり次のようになります。あなたが代わりに文字コードを使用する必要がありますので、あなたのボタンのテキストとして「<」と「>」文字を使用してHTMLに、これは、HTMLの流れを壊しますjsfiddleはクローズしていませんでした。そして、jsfiddleにはjaqueryライブラリの呼び出しがありませんでした（jsfiddleがライブラリを統合する方が早くなることを望みます）。それが役に立てば幸い。

$(document).ready(function(){ 
 
\t \t setInterval(function(){ animateSlider() }, 5000); 
 
}); 
 
//configuration 
 
var currentSlide = activeSlide(); 
 
var slides = $("#carousel .slides .slide"); 
 

 
//get active slide index 
 
function activeSlide(){ 
 
\t var activeSlide=$("#carousel .slides .active").index(); 
 
\t return activeSlide; 
 
} 
 

 
function animateSlider() { 
 
//remove active class from previous element and assign it to the current one then animate it using animate() function 
 
    var $current=slides.eq(activeSlide()); 
 
    var $next= $(".slides img:first"); 
 
     
 
    $next.addClass('active'); 
 
    
 
    $current.animate({opacity: 0.0}, 1000, function() { 
 
       $current.removeClass('active'); 
 
       $current.css({opacity: 1}); 
 
      }); 
 
}

html,body { 
 
\t height: 100%; 
 
\t position: relative; 
 
} 
 

 
*{ 
 
\t box-sizing: border-box; 
 
} 
 

 
#container { 
 
\t width: 90%; 
 
\t margin: 0 auto; 
 
\t height: 100%; 
 
} 
 

 
header { 
 
\t background: black; 
 
\t height: 20px; 
 
\t padding: 1.5em; 
 
\t color: white; 
 
} 
 

 
#carousel { 
 
\t position: relative; 
 
\t margin: 0 auto; 
 
\t width: 45%; 
 
\t margin-top: 15px; 
 
\t height: 100%; 
 

 
} 
 

 
.slide { 
 
\t position: absolute; 
 
\t max-width: 100%; 
 
\t z-index: 0; 
 
} 
 
.sliderbuttons { 
 
\t } 
 

 
#prev,#next { 
 
\t position: absolute; 
 
\t background-color: rgba(255, 148, 41, 0.68); 
 
\t box-shadow: 2px white; 
 
\t border:none; 
 
\t font-size: 1em; 
 
\t color: white; 
 
\t font-weight: bold; 
 
/* \t font-family: 'Baloo Tamma', cursive; 
 
*/ \t padding:10px; 
 
    top:15%; 
 
\t width: 10%; 
 
\t /*making the prev,next on top of content*/ 
 
\t z-index: 2; 
 
} 
 
#prev { 
 
\t left:0; 
 
} 
 
#next { 
 
\t right:0; 
 
\t \t } 
 

 
.active { 
 
\t z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<div id="container"> 
 
    <header> 
 
     header is here 
 
    </header> 
 
    <div id="carousel"> 
 
    <div class="sliderbuttons"> 
 
     <input type="button" name="next" id="next" value="&gt;"> 
 
     <input type="button" name="next" id="prev" value="&lt;"> 
 
     </div> 
 
     <div class="slides"> 
 
      <img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active"> 
 
      <img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide"> 
 
      <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide"> 
 
     </div> 
 
    
 
    
 
    </div> 
 
    
 
    </div>