簡単なjqueryスライダーがうまく動作しない場合

私はコードに苦労しますが、まずフィルター付きのスライドクラスを左に動かしてフェードアウトし、カルーセル内部クラスの末尾に追加する必要があります。どういうわけか..働いていない。助けてください。事前に感謝簡単なjqueryスライダーがうまく動作しない場合

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>slider</title> 
    <link rel="stylesheet" type="text/css" href="assets/css/slider.css"> 
</head> 
<body> 
    <div class="carousel"> 
     <div class="carousel_inner"> 
      <figure class="slides"> 
       <img src="assets/images/post4.jpg"> 
      </figure> 
      <figure class="slides"> 
       <img src="assets/images/post4-2.jpg"> 
      </figure> 
      <figure class="slides"> 
       <img src="assets/images/post4-3.jpg"> 
      </figure> 
     </div> 
    </div> 
<script type="text/javascript" src="assets/js/jquery.js"></script> 
<script type="text/javascript" src="assets/js/slider.js"></script> 
</body> 
</html>

はJQuery：

$(document).ready(function(){ 
    setInterval(function(){ 
     $(".slides:first").animate({"margin-left":"-290px"}).fadeOut().end().appendTo(".carousel_inner"); 
    },2000); 
});

出典

2016-04-14 Vishnuprasad Venugopal

スライダーのCSS何ですか？ – RRK

私はそうのように、アニメーションのためのコールバックを終了するappendToコードを移動します：

$(document).ready(function(){ 
    setInterval(function(){ 
     var firstSlide = $(".slides:first")[0]; 
     $(firstSlide).animate({"margin-left":"-290px", "opacity": 0.5}, 
          1600, //length of the slide/fadeout animation 
          function() { 
           //animation is complete, so move the slide to the end and fade it back it in, also reset the margin back to 0 
           $(firstSlide).appendTo('.carousel_inner').css("margin-left", 0).fadeTo(1000, 1); 
           } 
     ); 
    },3000); 
});

をCodepen：http://codepen.io/nobrien/pen/redYPQ

出典

2016-04-14 06:11:23 NOBrien

.end()が連鎖するには、以前のセレクタに最後のセレクタとリターンをドロップしますので、あなたのスライドが追加されていません。したがって$('.slides:first').end()は、既存の要素を生成しません。

出典

2016-04-14 05:31:21 Justinas

エンドを使用せずに直接セレクタを追加する必要がありますか？ plsは –

setInterval(function(){ 
    var $first = $(".slides:first"); 
    $first.animate({"margin-left":"-290px"}, function() { 
     var $img = $("<img />").attr("src", $first.find("img").attr("src")).on("load", function() { 
      var fig = $("<figure />").addClass("slides"); 
      fig.append($(this)); 

      $first.parent().append(fig); 
      $first.remove(); 
     }); 
    }); 
}, 2000);

フィドル：end()は、あなたが再び選択する必要があり、親要素に横断しているため、あなたが使用する必要がhttps://jsfiddle.net/36nzoxvk/1/

出典

2016-04-14 05:43:53

のスライドを助けますが、追加は正しくありません。 –

そのスライドを左にして、それをバックに追加して連続ループで行う必要があります。あなたのコードはループしていません –

はい、あります。 .carousel-inner divを調べると、要素がループしていることがわかります。あなたがそれを見ない理由は、画像が見つからないからです。しかし、画像があればループします。 –

だけの事は、.end().first()代わりの.end()です。

$(document).ready(function() { 
 
    setInterval(function() { 
 
    $(".slides:first").animate({ 
 
     "margin-left": "-290px" 
 
    }) 
 
     .fadeOut().end().first().removeAttr('style') 
 
     .appendTo(".carousel_inner"); 
 
    }, 2000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="carousel"> 
 
    <div class="carousel_inner"> 
 
    <figure class="slides"> 
 
     <img src="http://dummyimage.com/300x200/F00/fff"> 
 
    </figure> 
 
    <figure class="slides"> 
 
     <img src="http://dummyimage.com/300x200/0F0/fff"> 
 
    </figure> 
 
    <figure class="slides"> 
 
     <img src="http://dummyimage.com/300x200/00F/fff"> 
 
    </figure> 
 
    </div> 
 
</div>

出典

2016-04-14 06:01:24 RRK

これは動作していますが、完璧なものではありません。私はカルーセルのように左のエフェクトにスライドしているわけではありません（私は不平を言っていません）。もしあなたがそれを修正することができれば、それは大きな助けになるでしょう。 –

@VishnuprasadVenugopal答えを更新しました。 – RRK

簡単なjqueryスライダーがうまく動作しない場合

答えて

関連する問題