Themeentwicklung

Bilder Slideshow erstellen (Themeentwicklung Teil 18)

Um eine Slideshow in unser Theme zu integrieren, benötigen wir zunächst ein Markup. Wir benötigen einen Container für den Slider mit einer frei wählbaren Klasse sowie die Subcontainer mit den einzelnen Elementen. In diesem Beispiel gehen wir von folgender Struktur und dem Slider Slick aus.

Wir haben ein Seiten Template z.B. page.php in diesem wird der Container geöffnet. In diesem Container wird der Loop erzeugt. In diesem Loop wird der Subcontainer erzeugt. Also so viele <div> wie Inhalte gelooped werden. Also grob folgendes Schema:

CSS laden

Anschließend registreren wir die CSS Datei für den Slider in der functions.php

JS laden

Danach registrieren wir das Javascript in der functions.php

Zusätzlich notieren wir folgendes JS inline vor dem </body> tag.

Anstelle von Einstellungen können folgende Einträge gesetzt werden.

Einstellungen

Mehrere Einträge

Responsive

Variable Breite

Adaptierte Höhe

Daten Atrribut Einstellungen

Zentriert

Automatisch abspielend

Mit sanftem Übergang

Ein-, Ausblendbar

Filterbar

Synchronisierungseffekt

Rechts nach Links

[collapse]

Achtung! Der Loop muss natürlich mehr Elemente ausgeben, als in den Slider Einstellungen angegeben werden, sonst wird natürlich kein Slide-Effekt erzielt.

0 Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

11 − vier =