Flexslider Slideshow

Auf der Seite https://www.woothemes.com/flexslider findet Ihr eine geniale Slideshow, die Ihr als html-Widget auf Eurer Webseite einsetzen könnt.

 

Beispiel:

flexslider-Slideshow

  • Flexslider by WooThemes - die responsive Slideshow!

  • Dieses Bild enthält einen Link (...klick drauf!)

Das Besondere an der Flexslider-Slideshow ist, dass sie auch in der mobilen Ansicht richtig dargestellt wird, da das flexslider-Skript die Slideshow automatisch auf die jeweilige Browsergröße skaliert!

 

HowToDo

1. Code der Slideshow in ein html-Widget-Element einfügen...

 

<div class="flexslider">
<ul class="slides">
    <li>
        <img src="URL(Bild1)" alt="" />
        <p class="flex-caption">
        Bildbeschreibung
        </p>
    </li>
    <li>
        <a href="URL(Link)">
        <img src="URL(Bild2)" alt="" /></a>
        <p class="flex-caption">
        Dieses Bild ist verlinkt...
        </p>
    </li>
    <li>
          <img src="URL(Bild3)" alt="" />
    </li>
    <li>
        <img src="URL(Bild4)" alt="" />
    </li>
</ul>
</div>

...und Platzhalter für Pfade (URL) mit eigenen Pfaden zu Links und Bildern austauschen!


2. flexslider.css - Inhalt kopieren (ggf. anpassen) und im Head-Bereich einsetzen (anhängen)


3. flexslider.txt - Inhalt kopieren und als html-Widget am Ender der Seite einsetzen

 

 

Download
flexslider.css
Cascading Style Sheet Datei 4.7 KB
Download
flexslider-js.txt
HTML Dokument 755 Bytes

Kommentar schreiben

Kommentare: 0

flexslider.js