jquery waterwheel carousel


October 12, 2011 at 08:56
JavaScript jQuery

Ich brauchte ein jquery plugin, das mir diverse bilder in rotiert. Das jquery waterwheel carousel war schon ziemlich perfekt für meine Zwecke und ich kann es eigentlich nur jedem empfehlen. Ich musste für meine Zwecke noch zwei kleine Änderungen machen: 1. das carousel verarbeitet nur images, ich brauchte allerdings unbedingt dieselbe Funktionalität für divs (mit Bildern als Hintergrundbild). Lösung: im Quellcode wird direkt nach Bildern gesucht. Man muss also überall nur nach .find('img') suchen und dies durch .find('div') bzw. find('div.klassenname') ersetzen. Das ganze funktionierte dann zuerst nicht mehr in Chrome, das lag an der preload Funktion. Da es sich um Hintergrundbilder handelt und ich nicht weiß, wie man die vorlädt, habe ich das ganze einfach auskommentiert:
function preload(callback) {
        callback();
}
Das wars schon. Dann spielt auch Chrome das Spiel mit. 2. das carousel kann immer nur um ein item weiterscrollen, ich brauchte aber die Möglichkeit, mit jedem Klick um 3 Items weiterzuscrollen. Die Pfeile werden mit einer Funktion namens moveOnce belegt. Um nun nicht ein Item weiterzuscrollen sondern drei, habe ich mir eine neue Funktion moveThrice geschrieben:
      function moveThrice(direction) {
        var currentCenterIndex = data.currentCenterItem.data().index;
        if ((currentCenterIndex < 3 && direction === true) || (currentCenterIndex > (data.totalItems-3) && direction === false)) {
          clearTimeout(data.autoPlayTimer);
          if (options.edgeReaction === 'reset') {
            rotateCarousel(!direction,data.totalItems-1);
          } else if (options.edgeReaction === 'reverse' && options.autoPlay !== 0) {
            rotateCarousel(!direction,3);
            options.autoPlay *= -1;
          }else{
          	if(direction == true){
          		new_number = currentCenterIndex;
          	}else{
          		new_number = data.totalItems - currentCenterIndex - 1;
          	}  
          	rotateCarousel(direction, new_number);
          }
        } else {
          rotateCarousel(direction,3);
        }
      } 

Hinterlasse einen Kommentar: