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