jquery waterwheel carousel

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.