Achtung: für jQuery simple carousel gibt es jetzt eine eigene Projektseite auf google code: http://code.google.com/p/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)
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. [...]
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.
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
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?
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
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
2. April 2010 um 20:33 Uhr
Hi Toby. Es ist SO NETT von dir!
Kann ich dass auch ein bischen veraendert benutzen?
Dein blog design ist auch wunderbar
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!!!!
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
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
8. September 2010 um 12:58 Uhr
Gibt es eine Möglichkeit zusätzlich zu den “prev” und “next” Buttons auch die Elemente einzeln auszuwählen? Also von “content2″ zu “content5″ zu springen? Würde mich sehr freuen, wenn es dazu einen Ansatz gibt!
8. September 2010 um 18:36 Uhr
Nein, bisher ist das Skript nur ganz einfach gestrickt. Wer wirklich weiterführende Features benötigt, der soll sich mal den Nivo Slider ansehen: http://nivo.dev7studios.com/. Der kann weitaus mehr. Das Skript hier ist wirklich nur für Leute die nur einen ganz minimalistischen Slider brauchen.
Viele Grüße
Tobi
1. Oktober 2010 um 21:16 Uhr
Ich bin nun beim Carousel ausprobieren und dachte mir, ich versuche deines als erstes, weil eben “simple”.
Funktioniert wunderbar, aber seltsamerweise fehlen immer ein paar Items.
Dann ein anderes probiert, und auch hier fehlt immer das letzte LI.
Hast du eine Ahnung, was ich da verbockt habe? Ich schaffe es einfach nicht, dass alle LIs dargestellt werden.
2. Oktober 2010 um 11:29 Uhr
Hi mores. Hm, komisch. Bei mir werden schon alle Layer auch angezeigt. Ich kann dir nur empfehlen mal mit Firebug (Addon für den Mozilla Firefox Browser) zu debuggen. Da kannst du dir für die geladene Seite genau ansehen, welchen Status deine “li” Elemente haben.
8. Oktober 2010 um 17:50 Uhr
Hi,
tolles Script – kann man es frei verwenden und gibt es möglicherweise eine Lösung für den IE 6.0!
LG
8. Oktober 2010 um 19:14 Uhr
Hi Rudi,
gerne kannst du das Skript frei, auch in kommerziellen Projekten verwenden! IE6 support ist erstmal nicht geplant. Gerne darfst du das Skript aber abändern und dann auch weiter verbreiten. Ist praktisch public domain ohne jeglicher Lizenz frei verwendbar.
Grüße
Tobi
5. November 2010 um 11:24 Uhr
Hey Tobi,
für das nächste Update wäre noch ein Stop on ‘mouseover’ nicht verkehrt. Damit man den Inhalt in ruhe lesen kann.
16. November 2010 um 15:22 Uhr
Hi Tobias!
Klasse Script. Kann man damit auch mehrere Slider auf einer Seite positionieren?
Grüße vom Max
18. November 2010 um 22:47 Uhr
Hi Tobias, vielen Dank für das Script. Ist das einzige, das ich gefunden habe, welches innerhalb eines anderen Carousels funktioniert.
Kannst du mir kurz sagen, was ich umstellen muss, damit bei “visible: 3″ nur um ein Element gescrollt wird, wenn man auf next klickt?
Danke!
18. November 2010 um 22:56 Uhr
Und bei der Gelegenheit noch eine Kleinigkeit: kann man den Buttons eine Klasse zuweisen, wenn es nicht mehr weitergeht/wenn man am Ende der Liste ist (z.B. “deactivated” oder so)?
Thx!
7. Dezember 2010 um 10:47 Uhr
Hi mores, wir hatten den gleichen Eindruck und haben Zeile 83 der Version 0.2 geändert:
config.current = (config.visible==1) ? config.items-1 : config.items-config.visible-config.items%config.visible;
11. Dezember 2010 um 23:39 Uhr
Hallo!
Leider stellt sich der IE7 bei diesem Carousel ‘mal wieder quer. Dort wird immer der komplette Inhalt des Container-Divs angezeigt.
Wenn du ‘mal Zeit und Lust hast, könntest du das ja einmal überprüfen.
Ansonsten finde ich dieses hier schon ziemlich gut. Ist ohne lange Einarbeitungszeit direkt einsetzbar – genau so, wie es sein sollte.
Viele Grüße
19. Februar 2011 um 19:01 Uhr
Hallo,
wird das hier noch weiterentwickelt oder ist es tot?
wäre schade denn es ist schön kompakt nur leider scheint die Fade Funktion kaputt zu sein. Die IEs verschieben z.B. das eingefadete Bild immer um 2-3 Pixel hin und her, auch werden CSS Angaben im externen Stylsheet nicht erkannt? man muss also sämtliche Formatierung via Style=”" direkt machen, das ist nicht so gut. Schade, eben wegen dem Fade wäre das Teil Interessant gewesen.
Eventuell machst ja jemand noch weiter?
Grüße
19. Februar 2011 um 19:56 Uhr
Hi,
also wenn du Probleme hast, kannst du mir gerne Details noch einmal zukommen lassen. Bei mir klappt das auch im IE ganz gut. Welche Version verwendest du denn?
Das man die CSS Eigenschaften selbst setzen muss ist bewusst so gewählt. Dadurch hat man auch die volle Kontrolle und hat die Möglichkeit das frei zu gestallten. Gerne nehme ich auch Verbesserungsvorschläge an!!
Viele Grüße
Tobi
12. September 2011 um 13:58 Uhr
Servus, super Plugin, ich habe nur das Problem, sobald ich in einen anderen Tab wechsel (habe nur im Firefox getestet.) scheint das Parameter “auto” ich habe 5000ms angegeben, auf 0 zu springen.
Das Carousel fährt also ohne Stop hin- und her.
Hat noch jemand dieses Problem?
Gruß
22. November 2011 um 21:15 Uhr
Hallo Tobi, habe das auf der Seite “Produkte” mal soeben reingeschmissen.
Großes, Kompliment, hat keine 10 Minuten gedauert und noch nicht einmal Extra-CSS notwendig.
Lief sofort rund. Wenn ich mir da so andere Plugins anschaue, häufig 40 KB oder mehr. Da kommt man richtig ins Grübeln, ob Deine paar Codeschnipsel es schaffen das gleiche machen.
Grüße Werner