Dk carouFredSel
Aus Contao Community Documentation
Version vom 20. November 2012, 16:17 Uhr von Nina (Diskussion | Beiträge)
dk_caroufredsel ist ein jQuery-basierter Content/Elementslider mit dem Inhaltselemente aller Art in einer Slideshow gezeigt werden können. Online-Demos sind auf der Originalseite zu finden.
| Erweiterungs-Übersicht | |
|---|---|
| Name des Entwicklers | Dirk Klemmt (Contao-Erweiterung), Fred Heusschen (jQuery.carouFredSel) |
| Kompatibilität mit Contao Version | 3.0.0 |
| Link zum Extension Repository | http://contao.org/de/extension-list/view/dk_caroufredsel.html |
| Link zum Tracker | https://github.com/dklemmt/contao_dk_caroufredsel |
 |
Achtung: Hier entsteht aktuell das Handbuch für den caroufredsel-Slider. Ihr könnt gerne daran mitschreiben und z.B. verschiedene Konfigurationen beschreiben. |
Installation
Wie bei allen Erweiterungen, kann diese über die Erweiterungsverwaltung installiert werden. Falls diese nicht verfügbar sein sollte gibt es noch die Möglichkeit der manuellen Installation. Sollte die Erweiterung manuell installiert werden müssen auch alle Abhängigkeiten mit installiert werden. Diese sind im Extension Repositority ersichtlich.
Wichtig
- 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; sowiw vertical-align: top; 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.
- Bei Einsatz des Grid-Systems von Contao sollte man um das Carousel herum ein leeres DIV anlegen, da sonst unerwünschte Grid-Anweisungen die korrekt Funktion des Carousels behindern. So schreiben sich die Grid-Anweisungen auf das leere DIB und alles ist gut.
Anwendungsanleitungen
Hier werden nach und nach Beschreibungen der Slider-Funktionen veröffentlicht.
