Swiper
Erweiterungen
Der frei verwendbare 'Mobile Touch Slider' SWIPER ➔ https://swiperjs.com ist hier mit vier Erweiterungen versehen worden.
Erweiterung 1:
Der HTML-Code für die einzelnen Bilder wird automatisch erzeugt. Ein Verweis auf das Verzeichnis mit den Bildern genügt. Im Autoplay-Modus ist eine individuelle Anzeigedauer für jedes Bild möglich.
Erweiterung 2:
Zusätzliche Bildbeschreibungen werden außerhalb des Sliders angezeigt. Sie wechseln synchron zu den Bildern. Die Bildbeschreibungen werden aus einer einfachen Textdatei (.txt) automatisch ausgelesen. Ein Verweis auf die Textdatei genügt.
Erweiterung 3:
Ein Doppelklick auf den Slider schaltet die Fullscreen-Anzeige an und aus. Im Fullscreen-Modus können die reinen Bilder betrachtet werden ohne die Bildbeschreibungen.
Erweiterung 4:
Ein unbewegter Mauszeiger über dem Bild wird ausgeblendet.
Anleitung
Mit folgenden Schritten wird der Slider in die eigene Webseite eingefügt:
Schritt 1:
Den Ordner hbSlider in den Webspace hochladen.
Schritt 2:
Im <head> tag die Zeilen
<link rel="stylesheet" href="https://cdn.jsdelivr.net/ npm/swiper@9/swiper-bundle.min.css" />
<link rel="stylesheet" href="hbSwiper/css/swiper.css" />
<link rel="stylesheet" href="hbSwiper/css/mySwiper.css" />
einfügen.
Im <body> tag an der gewünschten Stelle die Zeile
<?php include "hbSwiper/php/hbSwiper_1.php"; ?>
und vor dem schließenden </body> tag die Zeile
<?php include "hbSwiper/php/scripts.php"; ?>
einfügen.
Schritt 3:
Einen Ordner mit den Bildern anlegen und in der Datei 'hbSwiper/php/init_1.php' bei der Variablen '$imgFolder' den Pfad zu diesem Ordner eintragen.
Schritt 4:
Eine Textdatei (.txt) mit den Bildbeschreibungen erstellen und in der Datei hbSwiper/php/init_1.php bei der Variablen $textFile den Pfad zu dieser Datei eintragen.
In der Textdatei beginnt jede Zeile mit dem Dateinamen eines Bildes. Nach dem Dateinamen folgt ein Tabulatorzeichen als Trennzeichen zur Bildbeschreibung und danach der Text der Bildbeschreibung. Die Bildbeschreibung wird mit einer Zeilenschaltung (Taste RETURN bzw. ENTER) abgeschlossen. Die Bildbeschreibung kann auch aus HTML-Code bestehen. Die Reihenfolge der Bildbeschreibungen ist beliebig.
Schritt 5:
Die Einstellungen für Swiper in den Dateien hbSwiper/script/init-swiper.js und hbSwiper/script/swiper_1.js vornehmen.
Schritt 6:
Eventuell die Styles in den Dateien hbSwiper/css/mySwiper.css und hbSwiper/css/swiper.css anpassen.
Weitere Hinweise
Möchte man im Autoplay-Modus für manche Bilder eine individuelle Anzeigedauer, so hängt man an den Dateinamen des betreffenden Bildes zwei Underlines und eine Zahl an, die die Anzeigedauer in Millisekunden angibt. Zum Beispiel wird dann aus "Geburtstag.jpg" der Dateiname "Geburtstag__5000.jpg". In der Textdatei mit den Bildbeschreibungen kann dieser Zusatz fehlen. So muss man beim Ausprobieren verschiedener Anzeigedauern nicht jedesmal zusätzlich die Textdatei mit den Bildbeschreibungen ändern.
Wenn keine Bildbeschreibungen angezeigt werden sollen, wird der Variablen $textFile in der Datei hbSwiper/php/init_1.php ein leerer String zugeordnet. In der Datei hbSwiper/css/mySwiper.css wird beim Element #myImgDescription_1 die Eigenschaft min-height auf null gesetzt.
Wer grundsätzlich keine Bildbeschreibungen einsetzt, aber die Bilder automatisch aus einem Verzeichnis einlesen will, kann eine schlankere Version des hbSwipers ohne die Funktionalität für Bildbeschreibungen herunterladen:
➔ Beispiel ohne Bildbeschreibungen herunterladen (Zuletzt geändert am 20.02.2023)
Mehrere Slider auf einer Seite
Ein Beispiel mit zwei Slidern auf einer Seite ist hier zu sehen:
➔ Beispiel 2 ansehen