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

자바 스크립트

$(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의 흐름을 나누기 사용 js는 닫는 }이 없어서 jsfiddle은 jquery 라이브러리 호출이 누락되었습니다 (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>