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/

1. Download des Plugins unter https://github.com/stevenwanderski/bxslider-4
2. Einbinden der externen CSS-Datei "jquery.bxslider.css"
3. jQuery in die Internetseite einbinden
4. Einbinden der Bilder in einer unsortierten Liste mit der Klassenbezeichnung „bxslider“
5. Einbinden der "jquery.bxslider.js"-Datei
6. Funktionsaufruf und anpassen der optionalen Parameter

Beispiel für Schritt 2

<link rel="stylesheet" type="text/css" href="/css/jquery.bxslider.css" />

—

Beispiel für Schritt 3

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

—

Beispiel für Schritt 4

<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>

—

Beispiel für Schritt 5

<script language="javascript" type="text/javascript" src="/js/jquery.bxslider.js"></script>

—

Beispiel für Schritt 6

<script language="javascript" type="text/javascript">
	$('.bxslider').bxSlider({
		auto: true,
	 	speed: 800,
		pause: 7000,
		mode: 'fade'
	} );
 
	$(document).ready(function(){
		$('.bxslider').bxSlider();
	});
</script>