JSlick

JSlick ist das wahrscheinlch flexibelste Slider/Slideshow Modul für Joomla. Es basiert auf der hervorragenden jQuery Erweiterung slick von Ken Wheeler.

Alles sliden mit JSlick

  • Sie möchten Bilder aus einem bestimmten Ordner anzeigen? JSlick.
  • Sie möchten diese Bilder mit einer Beschreibung versehen und/oder verlinken? JSlick.
  • Sie möchten stattdessen einen Slider aus Joomla Beiträgen generieren? Auch JSlick.
  • Sie möchten einen Autoplay-Slider (a.k.a. Slideshow)? JSlick.
  • Sie möchten die volle Kontrolle über ihren Slider? JSlick.
  • Sie möchten etwas anderes? JSlick kann noch so viel mehr.

Dokumentation und Demo

Der Slider, den Sie hier sehen, zeigt nicht nur Informationen über die Konfiguration von JSlick, sondern fungiert zudem als Live-Demo des JSlick Moduls mit Inhalten, die aus einer Joomla-Kategorie generiert wurden.

1. Modi

Das erste, was Sie bei der Benutzung von JSlick einstellen sollten, ist, welchen der drei Modi, die das Modul enthält, Sie verwenden möchten:

Standard Modus

In diesem Modus zeigt JSlick einfach nur einen Slider an, der mit den Standardeinstellungen läuft. Sie müssen nun lediglich noch den Klassennamen des Sliders und einel Slide-Quelle festlegen (außerdem können Sie noch ein Theme für Ihren Slider auswählen).

Vorteile: Sehr einfach aufzusetzen. Im Gegensatz zum Erweiterten Modus wird Ihrer Seite kein Inline-Script-Element hinzugefügt.

Nachteil: Der Standard Modus ist so gestaltet, dass er möglichst verbreitete Einsatzzwecke von Slidern abbildet. Sollten Sie allerdings einen spezielleren Wunsch haben, bietet dieser Modus keine Einstellmöglichkeiten. Nutzen Sie in diesem Fall bitte einen der anderen Modi.

Erweiterter Modus

Im Erweiterten Modus bietet JSlick große Zahl an Konfigurationsmöglichkeiten für Ihren Slider. Sie finden diese im Reiter Erweiterte Einstellungen.

Vorteile: (Fast) alle Optionen von Slick in einer grafischen Benuzeroberfläche.

Nachteil: Fügt Ihrer Seite ein Inline-<script> hinzu.

Expertnmodus

Im Expertenmodus müssen Sie zusätzlich zur Grundkonfiguration des Sliders etwas JavaScript schreiben (es handelt sich nur um einen Funktionsaufruf). Dafür haben Sie zu 100% die volle Kontrolle über Ihren JSlick Slider.

Vorteile: Noch mehr Funktionen für Ihren Slider. Sogar das Anlegen von Breakpoints für ein responsives Verhalten des Sliders ist möglich.

Nachteil: Sie müssen ein kleines bisschen Code schreiben. Aber schließlich sind Sie Experte!

2. Klassenname des Sliders

In JSlick muss ein Identifikator für jeden Slider gesetzt werden. In den meisten Fällen (insbesondere wenn Sie nicht den Expertenmodus nutzen) sollte dieser Identifkator einzigartig sein. Er darf keine Umlaute oder Leerzeichen enthalten und wird als Klassenname des den Slider umgebenden DIV-Elements gesetzt.

Dementsprechend sollte im Expertenmodus Ihr jQuery-Code ungefähr so aussehen:

	$(.SLIDER-KLASSENNAME).slick();

3. Slide-Quelle

Im dritten Konfigurationsschritt sollten Sie eine Quelle für Ihre Slides auswählen.

Bilder aus einem Verzeichnis

Die erste Möglichkeit ist, ein Unterverzeichnis des Bilderordners Ihrer Joomla-Installation anzugeben, aus dem das Modul die Slides laden soll. Sie können außerdem eine Datei mit dem Namen labels.txt in dieses Verzeichnis hochladen in welchem Sie zu jedem Bild einen Titel, eine Beschreibung und eine Linkadresse festlegen können, auf die das Slide verweisen soll.

Inhalte aus einer oder mehreren Joomla Kategorien

Als zweite Möglichkeit kann JSlick auch Beiträge aus einer Auswahl an Joomla-Kategorien laden und im Slider anzeigen. Jeder Beitrag wird dann zu einem Slide. Alternativ können stattdessen auch nur die Hauptbeiträge angezeigt werden.

Darüber hinaus bestehen einige Optionen um die "Bilder und Links" der Beiträge im Slider zu verwenden.

4. Einstellungen des Erweiterten Modus

Wenn Sie JSlick im Erweiterten Modus verwenden, bietet Ihnen der Reiter "Erweiterte Einstellungen" die Möglichkeit, beinahe alle Aspekte des Verhaltens Ihres Sliders zu konfigurieren:

  • Tastatur-Steuerung
  • Adaptive Höhe (die Höhe des Sliders entspricht immer der Höhe des dargestellten Inhalts)
  • Autoplay und Autoplay-Geschwindigkeit
  • Anzeigen/Ausblenden der Navigations-Buttons/-Pfeile
  • Den Slider als Navigation für einen weiteren Slider benutzen
  • HTML für die Vor-/Zurück-Buttons festlegen
  • Mittige Slides hervorheben
  • Art des Easings
  • Anzeigen/Ausblenden der Punkt-Navigation
  • Das ausgewählte Slide fokussiren
  • Ziehen mit der Maus ein-/ausschalten
  • Fading-Effekt
  • Auf bestimmte JavaScript-Events reagieren
  • Autoplay beim Überfahren des Sliders mit der Maus pausieren
  • Anzahl der Slides, die gleichzeitig angezeigt werden und Anzahl der Slides, die geslidet werden, festlegen
  • Geschwindigkeit der Übergänge
  • Swiping (Touch-Gesten) ein-/ausschalten und konfigurieren
  • CSS3 Transitions verwenden (oder jQuery Transitions)
  • Den Slider vertikal statt horizontal anzeigen
  • Die Richtung des Sliders umkehren (right-to-left)

5. Themes

JSlick vier vorgefertigte Themes:

Das Basic Theme zeigt nur die Slides an und fügt Ihnen einige CSS-Klassen (aber keine Stilangaben) hinzu. Sie können das Theme somit leicht nach Ihren Wünschen gestalten, indem Sie in Ihrem Template CSS für diese Klassen schreiben.

Das Image Theme zeigt das in den Slides hinterlegte Bild vollflächig an und eventuell festgelegte Titel und Beschreibungen als Overlay. Dieses Theme eignet sich am besten für klassische Bilder-Slideshows.

Das Bootstrap 2 Theme fügt sich nahtlos in Joomla-Templates ein, die das Twitter Bootstrap Framework in Version 2 verwenden (dieses ist derzeit in Joomla enthalten).

Das Bootstrap 3 Theme ist das Pendant zum Bootstrap 2 Theme für Joomla-Template, die auf der aktuellen Bootstrap-Version 3 basieren.

Beide Bootstrap Themes nutzen die Bootstrap Jumbotron (a.k.a. Hero Unit) Komponente.

Selbstverständlich können alle Themes auch per Template Override überschrieben werden.