Flexslider 2 einbinden – Html Slidebar

Wie baue ich eine vernünftige und vor allem relativ simple Slidebar ein. Dies war heute eine zentrale Frage, welche wir uns im Rahmen einer Webseitenerstellung, gestellt haben. Nach einigen Tests mit verschiedenen Möglichkeiten haben wir uns für den Flexslider 2 entschieden.

Bei der einen Slidebar war nicht nachzuvollziehen was sie überhaupt macht, bei der anderen lag das Dropdown-Menü immer dahinter und wieder das andere Plugin blieb uns ein großes undurchsichtiges Rätsel. Am Ende waren wir super glücklich den Flexslider 2 gefunden zu haben.

Dieser ist relativ simpel einzubauen. Benötigt werden lediglich grundlegende Html-Kenntnisse. Lade dir im ersten Schritt dazu einfach die Dateien des FlexSlider 2 runter.- FlexSlieder 2 – . Diese legst du in einem beliebigen Verzeichnis ab. Interessant dabei sind die ‚jquery.flexslider.js‚ und ‚flexslider.css‚. Diese werden in die eigentliche Html-Datei eingebunden.

Zwei Schritte zum Erfolg:

Flexslider 2 im Html-Head

Füge zwischen ‚< head >‚ und ‚< / head >‚ folgenden Code ein:

<link rel="stylesheet" href="./flexslide/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="./flexslide/jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>

Achte darauf dass du in Zeile 1 und Zeile 3, den ‚src‘-Pfad auf deine Struktur anpasst.

Flexslider 2 im Html-Body

Füge zwischen ‚< body >‚ und ‚< / body >‚ folgenden Code ein:

<div class="flexslider">
<ul class="slides" >
<li>
<img src="./img/pic1.png" />
</li>
<li>
<img src="./img/pic2.png" />
</li>
<li>
<img src="./img/pic3.png" />
</li>
<li>
<img src="./img/pic4.png" />
</li>
</ul>
</div>

Flexslider 2 mit Thumbnails

Möchtest du jetzt noch, dass unter dem Slide die Thumbnails angezeigt werden musst du ein paar Modifikationen vornehmen. Füge in dem Script im Header die Zeile ‚controlNav: „thumbnails“‚ hinzu. Im Body muss jedes ‚li‚-Tag mit dem Attribut ‚data-thumb‚ und dem tumbnail-Pfad bestückt werden.

Weitere Beispiele und eine Liste aller Attribute – wie Slide-Geschwindigkeit, Anfangsposition, Wiederholungen, Menüeinblendung usw. – findest du im Download, am Ende des Posts.

Als kleine Anmerkung zu den weiteren Attributen. Diese werden mit Kommata getrennt in das Script geschrieben. An die selbe Stelle, an dem wir ‚controlNav: „thumbnails“‚ eingefügt haben.

Header

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
controlNav: "thumbnails"
});
});
</script>

Body

<div class="flexslider">
<ul class="slides" >
<li data-thumb="./img/pic1.png">
<img src="./img/pic1.png" >
</li>
....
</ul>
</div>

Download

• Download – Example 1: Flexslide
• Download – Example 2: Flexslide mit Thumbnails
• Weitere Attribute: Step 4 – Flexslide 2