Jquery Carousel前のスライド

Question

次のスライドと前のスライドをスクロールする自動再生と矢印付きの簡単なJqueryカルーセルを操作しようとしています。次のスライドコードは正しく動作しますが、前の矢印は動作しません。私はイメージを逆向きにループして前のイメージをフェードインする方法を知らない。

<div class="slider"> 
    <div id="slideshow"> 
     <div><h1 style="text-align: center; margin-top: 300px;">This is the FIRST slider</h1></div> 
     <div id="slide-1"> 
      <h1 style="text-align: center; margin-top: 300px;">This is the SECOND slider</h1> 
     </div> 
     <div id="slide-2"> 
      <h1 style="text-align: center; margin-top: 300px;">This is the THIRD slider</h1> 
     </div> 
     <div id="slide-3"> 
      <h1 style="text-align: center; margin-top: 300px;">This is the FOURTH slider</h1> 
     </div> 
     <div><h1 style="text-align: center; margin-top: 300px;">This is the LAST slider</h1></div> 
    </div> 
    <div class="arrow-div-1 show"><img src="images/arrow_left.svg" alt="" id="left-arrow"></div> 
    <div class="arrow-div-2 show"><img src="images/arrow_right.svg" alt="" id="right-arrow"></div> 
</div> 







$("#slideshow > div:gt(0)").hide(); 

var intrvl = setInterval(function() { 
    $('#slideshow > div:first') 
    .fadeOut(1000) 
    .next() 
    .fadeIn(1000) 
    .end() 
    .appendTo('#slideshow'); 
}, 3000); 



$(".arrow-div-2").click(function(){ 
    clearInterval(intrvl) 
    $('#slideshow > div:first') 
    .fadeOut(1000) 
    .next() 
    .fadeIn(1000) 
    .end() 
    .appendTo('#slideshow'); 
}) 

$(".arrow-div-1").click(function(){ 
    clearInterval(intrvl) 
    $('#slideshow > div:first') 
    .fadeOut(1000) 
    .prev() 
    .fadeIn(1000) 
    .end() 
    .appendTo('#slideshow'); 
}) 

Answer 1

心配しないで、答えを得た！ 2番目（左/前）の矢印divコードはこれにする必要があります

$(".arrow-div-1").click(function(){ 
    clearInterval(intrvl) 
    $('#slideshow > div:first') 
    .fadeOut(1000); 
    $("#slideshow > div:last") 
    .fadeIn(1000) 
    .prependTo('#slideshow'); 
})