Benutzer-Werkzeuge

Webseiten-Werkzeuge


bxslider

Inhaltsverzeichnis

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.7 zum Download angeboten. Eine ausführliche Dokumentation sowie viele Beispiele finden Sie auf dieser Internetseite http://bxslider.com/

Kurzanleitung

  1. Einbinden der Bilder in einer unsortierten Liste mit der Klassenbezeichnung „bxslider“
  2. Funktionsaufruf und anpassen der optionalen Parameter

Beispiel

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>
bxslider.txt · Zuletzt geändert: 2017/02/20 00:00 (Externe Bearbeitung)