Standard-Swiper

Plugin-Aufruf ohne Parameter

op_Swiper();

Beim Plugin-Aufruf ohne Parameter werden alle Einstellungen aus der Plugin-Konfiguration übernommen. Als Slider werden automatisch alle versteckten Seiten verwendet, die unterhalb (im nächsten Level) der aufrufenden Seite gefunden werden. Im Beispiel sind das die Unterseiten: Slider 01, Slider 02 und Slider 03.

Für die Gestaltung der Unterseiten bietet Swiper_XH noch weitere Funktionen.

Für die Demonstrationen wurde allen Beispiel-Swipern ein hellgrauer Hintergrund und ein Rahmen gegeben, damit die Swiper-Abmessungen deutlich werden. Das ist nicht Swiper-Standard, sondern wurde über das Demo-Template realisiert. Wie man das für jeden Swiper und alle Slider individuell regeln kann, wird weiter unten erläutert. Dass man mit dem gleichen Aufruf nicht unterschiedliche Swiper anzeigen kann, dürfte klar sein. Deshalb wurde bei den Beispiel-Slidern jeweils ein Set verwendet.

Beispiel 01 (horizontal)

Alle Einstellungen werden aus der Plugin-Konfiguration übernommen (Standard).

Slider 01
Eine verborgene Unterseite mit einfachem Text-Inhalt.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit. Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas vulputate laoreet lectus. Fusce pulvinar ante non sapien. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere.

Eaxample Image 01

Slider 02
Eine verborgene Unterseite mit einem Bild im Text rechts angeordnet.

Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas vulputate laoreet lectus. Fusce pulvinar ante non sapien. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere.

Slider 03
Eine verborgene Unterseite mit einem Bild über die gesamte Breite.

Example Image

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Beispiel 02 (vertikal)

Identischer Aufruf wie Beispiel 01. Änderung in der Plugin-Konfiguration:

  • Swiper-Container → Height: (Beispiel 290px)
    Für vertikale Swiper ist eine Höhenangabe zwingend erforderlich!
  • Swiper-Parameters → Direction: vertical
  • Swiper-Navigation → Arrows: deaktiviert (aus)

Slider 01
Eine verborgene Unterseite mit einfachem Text-Inhalt.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit. Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas vulputate laoreet lectus. Fusce pulvinar ante non sapien. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere.

Eaxample Image 01

Slider 02
Eine verborgene Unterseite mit einem Bild im Text rechts angeordnet.

Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas vulputate laoreet lectus. Fusce pulvinar ante non sapien. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere.

Slider 03
Eine verborgene Unterseite mit einem Bild über die gesamte Breite.

Example Image

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Weitere Beispiele

Auf der SWIPER-Demo-Seite sind weitere Konfigurations-Beispiele zu finden.

Da das Plugin Swiper_XH innerhalb von CMSimple_XH agiert und den Aufbau der Swiper-Struktur automatisch übernimmt, ist es mit dem Plugin-Aufruf ohne Parameter nicht möglich alle dort gezeigten Beispiele umzusetzen. Für solche Fälle bietet Swiper_XH jedoch die Möglichkeit individuelle Swiper über Swiper-Sets zu erstellen – unabhängig von der Standard-Konfiguration.