Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

--- bxslider [2015/12/19 15:56]
127.0.0.1 Externe Bearbeitung
+++ bxslider [2017/02/20 00:00] (aktuell)
@@ Zeile 1: / Zeile 1: @@
 ====== bxSlider ======
-Auf immer mehr Webseiten ist im oberen Bereich ein sogenannter "Slider" eingebunden. Ein Slider zeigt nacheinander verschiedene Bilder oder auch Beiträge wie z. B. News im zeitlichen Intervall an. Der bxSlider ist ein jQuery-Plugins bietet viele verschiedene Optionen für die Präsentation an. Aktuell wird der Slider in der Version 4.2.5 auf folgender Webseite zum Download angeboten: https://github.com/stevenwanderski/bxslider-4
+Auf immer mehr Webseiten ist im oberen Bereich ein sogenannter "Slider" eingebunden. Ein Slider zeigt nacheinander verschiedene Bilder oder auch Beiträge wie z. B. News im zeitlichen Intervall an. Der bxSlider ist ein jQuery-Plugins bietet viele verschiedene Optionen für die Präsentation an. Aktuell wird der Slider in der Version 4.2.7 zum Download angeboten. Eine ausführliche Dokumentation sowie viele Beispiele finden Sie auf dieser Internetseite http://bxslider.com/
+===== Kurzanleitung =====
+  - Download des Plugins unter https://github.com/stevenwanderski/bxslider-4
+  - [[css|Einbinden der externen CSS-Datei "jquery.bxslider.css"]]
+  - [[jquery:include|jQuery in die Internetseite einbinden]]
+  - Einbinden der Bilder in einer unsortierten Liste mit der Klassenbezeichnung "bxslider"
+  - [[JavaScript|Einbinden der "jquery.bxslider.js"-Datei]]
+  - Funktionsaufruf und anpassen der optionalen Parameter
+===== Beispiel =====
+**Beispiel für Schritt 2**
+<code html>
+<link rel="stylesheet" type="text/css" href="/css/jquery.bxslider.css" />
+</code>
+---
+**Beispiel für Schritt 3**
+<code html>
+<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+</code>
+---
+**Beispiel für Schritt 4**
+<code php>
+<ul class="bxslider">
+	<img src="/images/bxslider/frame_1.png" height="180" width="1000" />
+	<img src="/images/bxslider/frame_2.png" height="180" width="1000" />
+	<img src="/images/bxslider/frame_3.png" height="180" width="1000" />
+	<img src="/images/bxslider/frame_4.png" height="180" width="1000" />
+</ul>
+</code>
+---
+**Beispiel für Schritt 5**
+<code html>
+<script language="javascript" type="text/javascript" src="/js/jquery.bxslider.js"></script>
+</code>
+---
+**Beispiel für Schritt 6**
+<code html>
+<script language="javascript" type="text/javascript">
+	$('.bxslider').bxSlider({
+		auto: true,
+	 	speed: 800,
+		pause: 7000,
+		mode: 'fade'
+	} );
+	$(document).ready(function(){
+		$('.bxslider').bxSlider();
+	});
+</script>
+</code>

Wissensarchiv für Entwickler

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Unterschiede

Seiten-Werkzeuge