Flexslider 2 einbinden – Html Slidebar

Share on FacebookShare on Google+Share on LinkedInTweet about this on TwitterShare on TumblrEmail this to someone

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.

flexslider 2

flexslider 2 @Chrom

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>

Achte auch hier wieder darauf, dass du für jedes ‘img‘-Tag den ‘src‘-Pfad anpasst.

Flexslider 2 mit Thumbnails

flexslider 2 mit Thumbnails

flexslider 2 mit Thumbnails @Chrome

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

Share on FacebookShare on Google+Share on LinkedInTweet about this on TwitterShare on TumblrEmail this to someone

MrKnowing

Programmierer und Wissensnerd! Kontaktiere mich auf Google+ oder einfach per Mail danny@mrknowing.com

You may also like...

7 Responses

  1. Conny sagt:

    Vielen Dank für die kurze und knape Anleitun – einfach gut – Danke

  2. heike sagt:

    Hi, ich habe Flexslider2 Basis carousel in einer HTML-Seite eingebunden. Funktioniert aber ….
    die Feinheiten.
    Kannst Du mir helfen?
    Ich möchte das sich die Bilder nicht um 3 sondern immer nur um ein Bild sich weiter bewegen.
    und die Bilder sollen sich nicht an die Breite sondern an die Höhe orientieren. (Da meine Bilder alle unterschiedliche Breiten haben.

    lg Heike

  3. mrKnowing sagt:

    Hi Heike,

    eigentlich sollte der immer nur ein weiter “sliden”. hast du die folgenden Attribute so drin? Evtl. kann das passieren wenn er zufällige Bilder anzeigt “randomize: true”, oder du startest nicht beim ersten Bild.

    startAt: 0,
    randomize: false,

    hast du evtl. die Bilder in der falschen Reihenfolge geladen? … ansonsten sende mir doch einfach mal einen Link zu deiner Seite, dann schau ich es mir an.

    lg

  4. alfred sagt:

    Hallo
    Tolle Sache hier!, da finde ich mich selbst als Anfänger zu recht!
    „naja“ ich kämpfe mich halt Schritt für Schritt vorwärts *g*
    Im Ordner CSS befinden sich zwei CSS Dateien einmal die „flexslider.css“ und einmal die „style.css“

    Meine Frage dazu: für was benötige ich die „style.css“ datei (wenn ich sie lösche merke ich keinen Unterschied????

    Lg
    Alfred

  5. MrKnowing sagt:

    Hi Alfred,

    gute Frage. Generell regelt man in der CSS-Datei wie das Design aussehen soll bzw. wie es sich verhalten soll, wenn beispielsweise das Fenster zusammen geschoben wird.

    Soweit ich die CSS beurteilen kann (diese wurde nicht von mir erstellt sondern von WooThemes.com), machen diese nicht besonders viel. Sie legt die maximale höhe fest, den zoom und wie sich der Slider verhalten soll, wenn mit der Maus drüber gefahren wird.

    Wenn du sie löscht, könnte es sein, dass diese noch im Cach liegt. Probiere mal in deine Seite Strg+F5 zudrücken, dann wird die Seite ohne Cach neu geladen. Ansonsten kann es sein, dass die CSS generell gar nicht so viel Auswirkungen hat.

    Könnte mir ebenfalls vorstellen, dass das CSS erst so richtig zum tragen kommt, wenn man nicht nur Bilder in den Slider einfügt.

    beste Grüße

    PS: jeder fängt mal klein an!

  6. Guenter sagt:

    Hi,

    habe alles so eingebaut wie oben beschrieben, die vier Bilder werden aber alle untereinander angezeigt, kein Slide :(
    lokal habe ich die Seite unter XAMP laufen

    vielleicht eine Idee? Danke
    Grüße

    • MrKnowing sagt:

      Mhh ich kanns dir nicht wirklich sagen, aber hast du schon mal geschaut ob evtl. andere Stylesheets das Flexslider beeinflussen?
      lg

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>