Karussell funktioniert, wenn es 3 oder mehr Dias gibt, aber ist gebrochen, wenn nur 2 Dias

Question

Ich habe ein minimales Karussell gebaut, das gut zu funktionieren scheint, wenn 3 oder mehr Dias vorhanden sind. Einige Dinge, die ich bemerkt, waren:

1. Es die gleitende Animation entfernt auf ‚next‘
2. Es wird meine divs machen flackern
3. Es wird die Animation vollständig

ich auf einige mögliche brechen gearbeitet Lösungen, die mit .clone() auf der ersten Folie, dann .append() auf das Ende des Behälters, und das macht es etwas funktioniert, aber es wird in der Regel nur 1 Drehung machen und dann auf Folie2 stecken.

Hier ist meine Logik, die die prev/next Tasten Griffe klicken

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

und hier ist meine Logik, die behandelt die automatische Animationen

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

---

Hier sind zwei Geigen für die Diagnose meines Problems

my current attempt

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

jede Hilfe dankbar können Sie diese zu lösen! Danke!

Answer 1

Werfen Sie einen Blick auf this Geige.

Ich änderte Ihre next auf die folgenden:

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