2017-03-21 1 views
1

3つ以上のスライドがあるときにうまくいくように見える最小のカルーセルを構築したが、スライドをいくつか取り除くと、私が気づいたいくつかのものは以下の通りであった。3つ以上のスライドがあるときに動作するが、2つのスライドのみが壊れている場合

  1. それは上のスライドアニメーションを削除し、「次へ」
  2. それは私のdivはそれがアニメーションを中断します
  3. が完全

私はいくつかの可能性に取り組んでちらつくようになります最初のスライドで.clone()を処理し、次にコンテナの最後に.append()を処理するソリューションですが、それは多少動作しますが、通常は1回転だけしてからslide2に固定されます。

ここで前/次ボタン

var before_clone = $(elm + ':first').clone(); 
var after_clone = $(elm + ':last').clone(); 
$('#buttons a').click(function(e) { 
    //slide the item 
    if (container.is(':animated')) { 
     return false; 
    } 
    if (e.target.id == previous) { 
     container.stop().animate({ 
      'left': 0 
     }, 1500, function() { 
      //container.find(elm + ':first').before(container.find(elm + ':last')); 
      container.append(after_clone); 
      container.find(elm + ':last'); 
      resetSlides(); 
     }); 
    } 
    if (e.target.id == next) { 
     container.stop().animate({ 
      'left': item_width * -1 
     }, 1500, function() { 
      //container.find(elm + ':last').after(container.find(elm + ':first')); 
      container.append(before_clone); 
      container.find(elm + ':first'); 
      resetSlides(); 
     }); 
    } 
    //cancel the link behavior    
    return false; 
}); 

、ここをクリックして処理し、私のロジックはここで自動アニメーション

function rotate() { 
    $('#next').click(); 
     container.append(before_clone); 
     container.append(after_clone) 
} 

があるハンドル私のロジックです私の問題を診断するのに役立つ2つの仲間

my current attempt

my original code(make sure to remove/comment out 2 of the lis)

あなたがこの問題を解決するために提供することができます任意の助けに感謝! ありがとう!

答えて

1

フィドルthisをご覧ください。

私は次のようにあなたのnextを変更:

if (e.target.id == next) { 
    container.find(elm + ':last').after(container.find(elm + ':first')); 
    container.css({ 
     'left': 0 
    }); 
    container.stop().animate({ 
     'left': item_width * -1 
    }, 1500, function() { 
     resetSlides(); 
    }); 
    } 
+0

まあ、私はのろわれます。助けをありがとう、これは完璧です! –

関連する問題