Kurzbeschreibung

Ein responsive, swipe-fähiger, HTML5 jQuery Content Slider sowohl für Web als auch mobile Geräte. Der Liquid Slider ist ein responsive, swipe-fähiger, HTML5 jQuery Content Slider, der sowohl für Web als auch mobile Geräte eingesetzt werden kann.

Installation

Die Erweiterung kann einfach im Backend über den Erweiterungskatalog installiert werden. Für eine Installation in Contao 2.11.x wird zusätzlich die Erweiterung jQuery benötigt. Nach der Installation sollte im Seitenlayout jQuery aktiviert werden.

Anlegen eines neuen Liquid Sliders

1. Im Artikel wird zunächst ein Inhaltselement vom Typ "LiquidSlider - Start" angelegt. Für den Slider muss ein Name vergeben werden, alle weiteren vordefinierten Einstellungen sollten für einen ersten Test ausreichen.
2. Als nächtes wird ein Inhaltselement vom Typ "LiquidSlider - Ende" angelegt. Alle Inhaltselemente, welche nun zwischen Start- und Endelement angelegt werden, werden vom Slider erkannt und geslidet.

Erklärung zu den Einstellmöglichkeiten

Hash Links

Mit Hash-Links können Elemente im Slider gezielt über interne Links oder von externen Seiten angesteuert werden. Beispiel für einen Link auf der gleichen Seite:

<a href="http://www.example.com/#3">zeige Inhaltselement 3</a>

Beispiel für einen Link von einer anderen/externe Seite:

<a href="http://www.example.com/beispielseite.html#3">zeige Inhaltselement 3</a>

Hash-Link Namen

Hiermit können für die Hash-Tags, anstelle der Nummern, auch Namen verwendet werden.

<a href="http://www.example.com/#about-me">about me</a>

Hash-Titel Element

Hash-Link Namen können durch die Angabe eines HTML-Elements, welches sich innerhalb eines jeden Inhaltselements befindet, automatisch erzeugt werden. Sollte z.B. in jedem Inhaltselement eine Überschrift H2 vorkommen, kann mit der Angabe "H2" der Hash-Link Name daraus generiert werden. Es ist auch möglich nur die Elemente, die eine bestimmte Klasse besitzen z.B. "H2.title" dafür zu verwenden.

Hash-Tag Trennung

Hier können ein oder mehrere Zeichen für die Verwendung nach dem # Symbol angegeben werden. (Beispiel: "/", oder "!/")

Hash TLD

Geben Sie hier eine Zeichenfolge ein, welche an den Hash-Tag angehangen werden soll.

Cross-Links

Aktiviert/Deaktiviert die Verwendung von Cross-Links zur Steuerung des Sliders. Beispiel: href="#1" (auch #left oder #right möglich) mit der Referenzierung auf den Namen des anzusteuernden Sliders (unter Slidername vergeben). Beispiele:

<a href="#1" data-liquidslider-ref="slider-id">zum ersten Element</a>
<a href="#left" data-liquidslider-ref="slider-sliderName">zum vorherigen Element</a>
<a href="#right" data-liquidslider-ref="slider-sliderName">zum nächsten Element</a>

Dabei ist egal, wo sich der entsprechende Link auf der Seite befindet.

Cross-Link Namen verwenden

Dies erlaubt Ihnen Hash-Namen für Cross-Links zu verwenden (Beispiel: statt href="#1" - href="#ueber-mich"). Nützlich, wenn Sie öfters die Reihenfolge der Slides ändern.