Erweiterungen > dk_caroufredsel

jQuery.carouFredSel Content Element

[dk_caroufredsel]

Integration des jQuery.carouFredSel-Sliders als Content-Element

jQuery.carouFredSel ist ein jQuery-Plugin, das beliebige HTML Elemente in ein Karussell/einen Slider verwandelt. Es kann dabei ein oder mehrere Elemente gleichzeitig scrollen, egal ob horizontal oder vertikal, unendlich oder kreisförmig, automatisch oder bei Nutzeraktivität.

Möglichkeiten von carouFredSel

  • vollständig anpassbar
  • automatisches scrollen oder scrollen durch Buttons, mittels Tastatur, dem Mausrad oder durch Wischen
  • optionales responsible/fluid/liquid Karussell von Haus aus.
  • unterstützt variable Element-Größen (ebenso mit einer variablen Anzahl von sichtbaren Elementen)
  • eingebaute Tastatur- und Maus-Navigation und Pagination
  • 9 eingebaute Übergangs-Effekte: none, scroll, directscroll, fade, crossfade, cover, cover-fade, uncover und uncover-fade
  • viele intelligente "custom events" und eine Menge an weiteren Optionen
  • Ausrichtung (links/zentriert/rechts) der Elemente innerhalb der vorhandenen Breite/Höhe
  • dynamisches Hinzufügen und Entfernen von Elementen im Karussell
  • GET und (re)SET der Konfiguration nach Erstellung des Karussells

Implementation in Contao

  • beliebige Inhalte können gescrollt werden
  • beliebig viele Karussells auf einer Seite
  • individuelles HTML- und JavaScript-Template pro Karussell möglich
  • die meisten und wichtigsten Parameter/Einstellungen können im Backend konfiguriert werden
  • fehlende/zu komplexe Funktionalität kann im entsprechenden JavaScript-Template hinzugefügt werden (JavaScript/PHP Kenntnisse vorausgesetzt). Die meisten dynamischen Funktionen (z.B. custom events, hinzufügen/entfernen von Elementen zur Laufzeit) werden im Backend zz. nicht abgebildet.

Entdeckte Fehler, Verbesserungsvorschläge oder anderes gerne im Forum oder im GitHub-Repository: https://github.com/dklemmt/contao_dk_caroufredsel

Quelle/Beispiele/Infos/Anwendungs-Ideen

http://caroufredsel.frebsite.nl (Hauptseite)

http://coolcarousels.frebsite.nl (Anwendungs-Ideen)

Tipps/Hinweise

  • Damit carouFredSel gestartet wird, muß im Seitenlayout jQuery zum Layout hinzugefügt werden. 
  • Das Karussell sollte "out of the box" funktionieren. Werden Elemente teilweise abgeschnitten kann es helfen eine Breite/Höhe im Start-Element anzugeben und dem div ein display:inline-block zuzuweisen;
  • Das umschließende div des Content-Elements hat die CSS-Klasse ce_caroufredsel. Innerhalb dessen befindet sich ein weiteres div mit der individuellen CSS-ID ce_caroufredsel_xxx, welches die zu scrollenden Elemente umschließt. jquery.carouFredSel hängt sich mit einem weiteren div mit der CSS-Klasse caroufredsel_wrapper dazwischen. Die Navigations-Elemente haben neben einer allgemeinen CSS-Klasse zusätzlich noch die gleiche individuelle CSS-ID.
  • Der Navigations-Bereich im HTML-Template kann bei Bedarf umsortiert werden.
  • Bei Nutzung von HTML5 sollte man ein figure { margin:0; padding:0; } in seiner CSS-Definition verwenden, welches den browser-individuellen Stil resettet. Im Safari wird z.B. ein sehr großer Abstand drumherum hinzugefügt.

Optionale Abhängigkeiten

jquery_easing - wird diese Erweiterung installiert stehen 30 weitere "Easing"-Funktionen automatisch zur Verfügung.

jquery_mousewheel - wird diese Erweiterung installiert kann auch mit dem Mausrad gescrollt werden.

jquery_touchswipe - wird diese Erweiterung installiert kann ebenfalls mit Wischgesten und/oder Mausziehen gescrollt werden.

Version
1.0.0-beta2
Typ
Frei
Freigabedatum
15.10.2012
Kategorie
Anwendung
Lizenz
MIT/GPL
Copyright
© 2012 Dirk Klemmt (Contao-Erweiterung), © 2012 Fred Heusschen (jQuery.carouFredSel)
Autor
Dirk Klemmt (Dirch)
Freigabe-Notizen und Änderungs-Log für 1.0.0-beta2
Andere Versionen

Die beta2 ist ein großes Upgrade und nun weitgehend "feature complete". Durch die Implementierung von mindestens 15 weiteren Feldern mußte der Einstellungsdialog stark verändert werden. Er orientiert sich jetzt an der Funktionalität des CSS-Frameworks. Was nach wie vor gilt ist, daß nur gewählte und vom Standard abweichende Werte an das JavaScript weitergereicht werden. Durch die große Menge an Änderungen (auch in der Datenbank) sollten die Start-Elemente neu angelegt werden!

  • Upgrade auf carouFredSel Version 6.1.0
  • "responsive" wird nun komplett unterstützt
  • Größen/Ausrichtung des Karussells und der Elemente einstellbar
  • Minimale und/oder maximale Anzahl an sichtbaren Elementen
  • Scrollen per Mausrad, Wischgeste und Mausziehen
  • Speichern der Abspiel-Position
  • Play-/Pause-Button
  • Fehlerkorrekturen
Version Funktion
 
Total Funktion
9.20
Version Bedienung
 
Total Bedienung
8.80
Version Qualität
 
Total Qualität
9.20
Version Wertung
 
Total Wertung
9.07 (5 Stimmen)
Version Downloads
54
Total Downloads
1218
Version Install.
203
Total Install.
12649
Version Updates
16
Total Updates
5450
Abhängigkeiten dieser Erweiterung
Von dieser abhängige andere Erweiterungen
Name
Version von
Version bis
Contao
3.0.0-RC1
3.0.0
Name
Version von
Version bis