Bilder-Slider sind sehr beliebt, doch leider sind die bisher üblichen Lösungen meist nicht für responsive Webdesigns geeignet, da sich der Slider nicht automatisch an die unterschiedliche Bildschirmgrößen anpassen kann. In der letzten Zeit sind daher etliche neue responsive Image-Slider entwickelt worden. Eine Slider-Lösung ist zum Beispiel der FlexSlider, der jede Menge Anpassungen bietet und Links und Bildcaptions erlaubt. Im folgenden Artikel zeige ich, wie du den FlexSlider auf deiner Webseite einbinden kannst.

responsive Bilder Slider FlexSlider
Der FlexSlider ist ein flexibler Bilder-Slider für responsive Webdesigns.

1. Die benötigten Dateien downloaden

Auf der FlexSlider-Webseite kannst du dir das FlexSlider-Kit inklusive den Demo-Styles kostenlos downloaden.

2. Die JavaScript-Datei

Im Download-Ordner findest du die JavaScript-Datei jquery.flexslider-min.js. Diese kopierst du dir und fügst sie in deine Webseiten-Dateien (am besten in einen Ordner namens “js”) ein. Dann musst du die Datei noch innerhalb des head-tags deiner Webseite aufrufen:

[js]
<script src="deinpfad/js/jquery.flexslider-min.js" type="text/javascript"></script>
[/js]

Dabei musst du darauf achten, den richtigen Pfad zum Ordner “js” anzugeben. Falls du WordPress nutzt, kannst du anstelle des direkten Pfades auch den Code einfügen. Also:
[js]
<!– Include Flexslider Script –>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.flexslider-min.js" type="text/javascript"></script>
[/js]

Als nächsten Schritt musst du noch folgenden JavaScript-Code innerhalb deines head-tags integrieren, um den Slider zu aktivieren.
[js]
<!– Hook up the FlexSlider –>
<script type="text/javascript">
$(window).load(function() {
$(‘.flexslider’).flexslider();
});
</script>
[/js]

Damit dein Slider später funktioniert, ist es wichtig, dass du später im HTML die CSS-Klasse .flexslider verwendest.

3. Die CSS-Datei

Als nächstes benötigst du noch die CSS-Styles für deinen Slider. Dazu kannst du dir entweder die Styles aus der FlexSlider-Demo kopieren und diese in dein eigenes Haupt-Stylesheet einfügen oder du kopierst die Datei flexslider.css und fügst diese in einen neuen Ordner (z.B. mit dem Namen “slider”) in deine Webseiten-Dateien ein.

Wenn du dich dafür entscheidest, die flexslider.css Datei zu nutzen, musst du die Datei ebenfalls innerhalb deines head-tags aufrufen.
[html]
<!– Include CSS for Flexslider –>
<link rel="stylesheet" href="deinpfad/slider/flexslider.css" type="text/css" media="screen" />
[/html]

Die Styles kannst du natürlich noch an deine eigenen Bedürfnisse anpassen und z.B. Farben ändern. Die FlexSlider-Demo nutzt außerdem zwei Bilder. Diese findest du im Ordner “theme”. Daher musst du dir diesen Ordner auch noch in deinen Ordner “slider” kopieren.

(Wenn du die Styles für FlexSlider direkt in dein Haupt-Stylesheet kopieren möchtest, musst du den Pfad zu den beiden Bildern eventuell noch anpassen).

4. Der HTML-Code

Jetzt musst du noch den HTML-Code einbinden, um deinen Slider (z.B. auf der Startseite deiner Webseite) zu integrieren. Ich habe in meinem Beispiel vier Slider-Bilder in der gleichen Größe erstellt (namens slide01.jpg – slide04.jpg). Dann habe ich folgenden HTML-Code genutzt (in WordPress z.B. in der header.php Datei), um die Bilder zu integrieren:

[html]
<div class="flexslider">
<ul class="slides">
<li>
<img src="<?php echo get_template_directory_uri(); ?>/slider/slide01.jpg" />
<p class="flex-caption">Add a captions text.</p>
</li>
<li>
<a href="#"><img src="<?php echo get_template_directory_uri(); ?>/slider/slide02.jpg" /></a>
<p class="flex-caption">This image is wrapped in a link!</p>
</li>
<li>
<img src="<?php echo get_template_directory_uri(); ?>/slider/slide03.jpg" />
</li>
<li>
<img src="<?php echo get_template_directory_uri(); ?>/slider/slide04.jpg" />
</li>
</ul>
</div><!– end flexslider –>
[/html]

Meine Slider-Bilder habe ich ebenfalls in den „slider“ Ordner eingefügt. Da ich WordPress nutze, verwende ich wieder der PHP-Code < ?php echo get_template_directory_uri(); ?>. Alternativ kann man natürlich auch gleich den direkten Pfad zu den Bildern angeben.

Mit Hilfe eines p-tags, kann man Bildunterschriften angeben. Außerdem ist es möglich, einen Link für ein Slider-Bild zu setzen (siehe slider02.jpg).

WordPress-Tipp: Um deinen Sliderslider nur auf der Startseite deiner Webseite anzuzeigen, kannst du den kompletten HTML-Code in einen Conditional-Tag setzen:
[php]
<?php if (is_front_page() ) : ?>
Deinen Slider-Code hier…
<?php endif ?>
[/php]

responsive Bilder Slider FlexSlider
Als Beispiel habe ich den FlexSlider in das WordPress-Theme Nilmini integriert.

5. Weitere Optionen

Dies ist also eine grundlegende Einbindung des FlexSliders. Auf der Webseite findest du auch noch jede Menge weitere Optionen. Hier findest du z.B. unter Get Started / Step 4 eine Auflistung möglicher Anpassungen deines Sliders (zu kannst z.B. zwischen dem Effekt slide und fade in der Animation wechseln).

Ich hoffe meine kleine Anleitung zur Einbindung des Sliders hat dir weitergeholfen. Über deine Fragen und weitere Anregungen zum Artikel freue ich mich sehr!