Slider (Bilder)

Achtung
Es gibt auch eine Offline Version, die ohne Internet-Verbindung funktioniert:
Zur Offline Version des Slider

Einbindung

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

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 jedes Slider-Bild (img-Tag).

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 (unabhängig von der Breite der Bilder) von Ihrem Slider an.
Mit den Werten für "pager" und "controls" können noch weitere Einstellungen getroffen werden.

Slider Beispiel

Download

Dieses Slider-Paket kann auch hier heruntergeladen werden:
Download bxSlider

Einstellungen und weitere Informationen

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