Slider (Bilder) - Offline Version

Einbindung

  1. Laden Sie den ZIP-Ordner herunter und entpacken Sie den Ordner.
  2. Die benötigten Dateien finden Sie unter "bxslider-offline".
  3. Kopieren Sie die notwendigen Dateien (css-Dateien, js-Dateien) in die richtigen Ordner Ihrer Website.
  4. Fügen Sie die richtigen Verknüpfungen zu den Dateien vor dem schliessenden </head>-Tag ein und passen Sie den Pfad an.
  5. Der images-Ordner (liegt im Ordner "bxslider-offline") für die Navigationselemente des Sliders muss in den css-Ordner kopiert werden.
  6. Der Code für die Bilder muss im <body>-Bereich der Webseite, an der gewünschten Stelle, eingebettet werden.

HTML - Head

Fügen Sie folgenden Code in den <head> Bereich der gewünschten HTML-Seite ein.

Hinweis
Die Verknüpfung zum JQuery-Framework (<script src="https://code.jquery.com/jquery-latest.min.js"></script>) darf nur einmal in der HTML-Seite vorkommen!

Wenn in der HTML-Seite bereits das JQuery-Framework verwendet wird z. B. es wurde schon die Lightbox eingebaut oder bei der Verwendung von Bootstrap- oder HTML5UP-Templates,
braucht das JQuery-Framework nicht mehr eingebunden werden!

Bei HTML5UP-Templates wird die Verknüpfung zur JavaScript-Datei vor dem schliessenden </body>-Tag eingefügt.

HTML - Body

Erstellen Sie einen DIV-Container mit: <div class="slider"> mit einem <div> Element für jeden Slide.

HTML - Body - Slider initalisieren

Aktivieren Sie den bxSlider mit einem kurzen JavaScript. Fügen Sie dieses JavaScript vor dem schließenden <body>-Tag ein.
Mit dem Wert "slideWidth" geben Sie die Breite (abhängig von der Breite der Bilder) von Ihrem Slider an.

Slider Beispiel

Download

Dieses Slider-Paket (Offline Version) kann auch hier heruntergeladen werden:
Download bxSlider (Offline Version)

Einstellungen und weitere Informationen

Hinweis
Auf der original Website des Slider finden Sie noch weiter Einbau-Optionen und Einstellmöglichkeiten.