jQuery simple carousel

Eine einfache und ansprechende Möglichkeit mehrere Informationen auf Webseiten zu präsentieren, bietet ein “carousel” Effekt. Besonders wenn eine Liste von Eigenschaften veranschaulicht, Screenshots oder Features oder Fotografien präsentiert werden sollen, bietet es sich an, die einzelnen Bilder nacheinander einzuschieben und wieder verschwinden zu lassen (Beispiel: rsslounge). Neben einer sehr guten Nutzung des zur Verfügung stehenden Platzes, fällt durch die Bewegung die Information auf und lenkt die Aufmerksamkeit auf wichtige Kernbotschaften.

Slide Effekte und Carousel Skripte gibt es im Internet viele, überzeugen konnte mich keines. Meistens sind sie zu umfangreich oder es ist spezielles CSS notwendig, das dann unüberschaubar eingebunden bzw. die eigene Struktur daran angepasst werden muss. Nachdem jQuery sehr komfortabel ist und ich die meisten meiner Projekte auf jQuery aufbauen, habe ich mich entschlossen selbst ein einfaches jQuery Plugin zu schreiben. Dieses kommt ohne spezielles CSS aus und ist mit 1,8 kB auch schön kompakt.

Das Skript erwartet folgende HTML Struktur:

<ul id="carousel">
 <li>erster Frame (z.B. ein Bild)</li>
 <li>zweiter Frame (z.B. ein Bild)</li>
 <li>dritter Frame (z.B. ein Bild)</li>
 <li>vierter Frame (z.B. ein Bild)</li>
 ...
</ul>

Um nun aus der Liste ein carousel zu machen, reicht beispielsweise folgender Aufruf aus:

$("#carousel").simplecarousel({
 slidespeed: 700,
 auto: 5000,
 width: 480,
 height: 280
});

In obigen Fall ist das carousel 480×280 Pixel groß, wechselt automatisch alle 5 Sekunden zum nächsten Frame und der Wechsel (Geschwindigkeit des slide Effektes) dauert 0,7 Sekunden.

Es werden folgende Parameter unterstützt:

  • width: (int) Breite
  • height: (int) Höhe
  • next: (jQuery Objekt/Selector) wird auf dieses Objekt geklickt, wird der nächste Frame aufgerufen
  • prev: (jQuery Objekt/Selector) wird auf dieses Objekt geklickt, wird der vorhergehende Frame aufgerufen
  • vertical: (boolean) true = vertikales carousel; false = horizontales carousel
  • auto: (int/boolean) false = kein automatischer Wechsel; Wert in Millisekunden = pause bis automatisch zum nächsten Frame gewechselt wird
  • slidespeed: (int) Geschwindigkeit des Wechsels in Millisekunden
  • visible: (int) Anzahl an Frames die gleichzeitig sichtbar sein sollen
  • fade: (int) wird dieser Wert angegeben, so wird anstatt zu sliden das Frame ausgeblendet und das neue wieder eingeblendet. Die Geschwindigkeit des fade Effektes ist dann dieser Wert (siehe aditu.de)

Demo:

Download:

9 Kommentare zu “jQuery simple carousel”

  1. Linkhub Woche 06-2010 « pehbehbeh
    14. Februar 2010 um 16:35 Uhr

    [...] Gegen Anfang der Woche ist mir ein automatischer Image-Slider für CSS & jQuery untergekommen – was mir aber viel besser gefällt ist dieses simple jQuery carousel. [...]

     
  2. Gabriel
    23. Februar 2010 um 18:23 Uhr

    Das ist ein tolles Script! Allerdinsg bekomme ich die weiter Links nicht hin=( Das ist im Beispiel nicht beschrieben.

     
  3. Tobi
    23. Februar 2010 um 18:26 Uhr

    Hi Gabriel,

    schau dir einfach an, wie ich das auf meiner Homepage (http://www.aditu.de) mache. Da sieht das so aus:

    $("#carousel").simplecarousel({
                next: $('.next'),
                prev: $('.prev')
            });

    Viele Grüße
    Tobi

     
  4. gevork
    1. April 2010 um 22:46 Uhr

    Hi Toby, es funktioniert bei mir, aber
    a) wie kann ich statt 1 z.b 3 frames zeigen von 9
    b) kann ich kostenlos dass auf ein online-shop verwenden, die ich mache fuer mein klient?

     
  5. Tobi
    2. April 2010 um 08:52 Uhr

    Hi gevork,

    mit der Option “visible” kannst du einstellen, wie viele Frames sichtbar sein sollen. Ich habe aber gesehen, dass bisher immer nur um ein Frame weiter geschoben wird. Das ändere ich die nächsten Tage noch und aktualisiere es dann.

    Gerne kannst das Plugin auch in kommerziellen Projekten verwendet werden. An der Stelle stelle ich es komplett frei zur Verfügung. Es darf also frei und ohne irgendwelche Copyright-Hinweise verwendet, geändert, zum Download angeboten, verkauft oder was auch immer werden.

    Viele Grüße
    Tobi

     
  6. Tobi
    2. April 2010 um 18:13 Uhr

    Hi gevork,

    ok, habe eine neue Version online gestellt. Die funktioniert nun auch mit mehreren Frames korrekt.

    Viel Spaß damit
    Tobi

     
  7. gevork
    2. April 2010 um 20:33 Uhr

    Hi Toby. Es ist SO NETT von dir!
    Dein blog design ist auch wunderbar :) Kann ich dass auch ein bischen veraendert benutzen?
    Nicht so 100% gleich. ???? Aber algemeiner layout und textstyle…?????
    Wenn du auch erfahrung mit CodeIgniter hast und Bischen zeit hast, vielleicht koenten wir auch zussamen arbeiten?
    Mache gleich ein engine wie Classmates.com fuer UniWien…???????
    Wenn du zeit hast schreib mal zu mein e-mail die du siehst in kommentar daten, und wer sprechen weiter.
    Jetzt gehe neue version von carousel zu testen.
    DANKE nochmals!!!!

     
  8. gevork
    2. April 2010 um 23:22 Uhr

    Mit 6 divs die ich hin stecke in ich kann nicht die resultat kriegen die ich will :(
    Hier
    http://depositfiles.com/files/zxdel013g
    kannst du finden home.html mit alle css und js-s so dass kannst du verstehen welche probleme entsteht, vielleicht kannst du mir sagen wieso

    $(“#carousel”).simplecarousel({
    slidespeed: 700,
    visible:4,
    auto: 4000,
    width: 400,
    height: 333
    });
    hat nicht geholfen

     
  9. bac
    18. Juni 2010 um 15:17 Uhr

    mit 3 divs solltest du es mit “visible:3″ versuchen, dann stimmt die anzahl auch und er wird dir 3 divs anzeigen und dann die nächsten 3
    leider ist dein code nicht mehr unter dem link zu finden, sonst könnte ich es dir direkt zeigen ;)

     

Hinterlasse eine Antwort