Mich ereilen immer wieder Anfragen und Probleme bei der Erstellung eines Full-Width Sliders mit der TYPO3 Layerslider Extension. In diesem Tutorial möchte ich Dir zeigen, wie das Erstellen eines Sliders über die ganze Breite genau funktioniert, was man dafür benötigt und worauf man achten muss.

Im Prinzip ist ein Full-Width Slider genauso schnell erstellt wie ein normaler Slider. Jedoch müssen einige Bedingungen erfüllt sein, damit das alles reibungslos funktioniert. Unter anderem ist das Seitenlayout im Frontend, das genutzte Bildmaterial sowie die gesetzten Optionen für die Umsetzung wichtig. Fangen wir mit dem Seitenlayout an:

 
Das richtige Seitenlayout ist entscheidend!

Angenommen, Du hast das folgende Layout:

Wie Du sehen kannst, ist die erste Grundvoraussetzung für einen Slider über die ganze Breite, dass sich der Slider nicht in einem Element befindet, dass in der Breite begrenzt ist. Aus diesem Grund musst Du das TYPO3 Layerslider Plugin so platzieren, das rechts und links kein Abstand zum Browserfenster durch ein Eltern-Element erzeugt wird.

 
Und nun das richtige Bildmaterial bitte!

Da man für gewöhnlich davon ausgehen kann, dass die meisten Monitore eine größere Auflösung von 1280px Breite schaffen, solltest Du für einen Full-Width Slider entsprechende Hintergrundbilder verwenden. Möchtest Du also, dass der Slider noch auf 1920px Breite oder 2550px Breite gut ausschaut, sollten die Bilder entsprechend groß sein. Du solltest aber darauf achten, dass die Bilder in der Höhe nicht zu groß werden, sonst nimmt der Slider enorm viel Platz in Anspruch. Für mein Tutorial stelle ich mir Hintergrundbilder in der Größe von 1920 x 680 Pixeln her. Diese Werte werden übrigens später noch in den Slider Options benötigt! Diese Bilder habe ich eben angelegt, mit den 1920x680 Pixeln:

 

Anlegen des Sliders

Ich erzeuge nun im Backend einen neuen Slider mit dem Namen "Responsive Fullwidth Slider". Nach dem speichern öffne ich zuerst die Options oben rechts, und stelle folgendes ein:

  • Im Reiter "Basic" sollten folgende Einstellungen gemacht werden:

    • width: 100%
    • height: 680px (Wichtig: Hier immer die Höhe der Hintergrundbilder angeben, sonst wird's nix!)
    • skin: fullwidth

  • Im Reiter "Responsive" sollten diese Einstellungen gemacht werden:

    • responsive: Checkbox deaktivieren!
    • responsiveUnder: 1140

Eine Erwähnung zur Option "responsiveUnder": Wenn Du vorhast, auf dem Slider in einem Slide noch Layer zu erstellen, welche sich automatisch in der Breite Deiner Seite ausrichten, solltest Du hier den Wert der Breite Deiner Seite, der im Inhalt zur Verfügung steht, eintragen. Verwirrend? Kleine Grafik dazu:

 

In diesem Beispiel ist der Inhaltsbereich 1140px breit. Du siehst beim Slider die grauen Bereiche rechts und links. Wenn Du die Option "responsiveUnder" nutzt, kannst Du im weissen Bereich Layer anlegen, die in der Breite perfekt zu Deiner Seite passen, und wenn das Fenster verkleinert wird, bleiben die Elemente genauso platziert, bis das Fenster in diesem Beispiel schmaler als 1140px wird. Und wenn das Fenster schmaler als 1140px wird, verkleinern sich die Layer dann passend dazu wie bei einem normalen Slider.

Im Umkehrschluss bleibt der Slider also bei jeder Breite über 1140px genau 680px hoch, die Hintergrundbilder passen sich aber dennoch dynamisch an, und die einzelnen Layer sind sauber positioniert. Erst wenn das Fenster schmaler als 1140 Pixel wird, passt sich der Slider dann auch automatisch in der Höhe an.

 
Positionierung von Elementen

Wenn Du nun einen Slide erstellt hast und planst, Layer zu verwenden, hilft Dir der Positionierungsbereich weiter:

Ich habe auf dem ersten Slide eine Überschrift und einen Text platziert. Der Positionierungsbereich zeigt dir links und rechts den "Abfall" als Schraffur an. Du kannst die Elemente im Bereich von 1140 Pixeln frei platzieren. Diese Einstellung würde im Frontend folgende Ausgaben ergeben:

 
Ansicht bei 2550 Pixel Breite

Ansicht bei 1280 Pixel Breite

Ansicht bei 768px Breite

 

Video

Hier habe ich noch ein Demovideo vorbereitet, welches das vorgehen im Backend zeigt:

 

 

 

Hat Dir mein Tutorial gefallen? Du kannst gerne einen Kommentar hinterlassen!

Extbase Extension images Layer Slider Layerslider Responsive Responsive Slider TYPO3