Kommentare 34

Den responsive Bilder-Slider “FlexSlider” nutzen – so funktioniert’s

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:

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

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:

<!-- Include Flexslider Script -->
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.flexslider-min.js" type="text/javascript"></script>

Als nächsten Schritt musst du noch folgenden JavaScript-Code innerhalb deines head-tags integrieren, um den Slider zu aktivieren.

<!-- Hook up the FlexSlider -->
	<script type="text/javascript">
		$(window).load(function() {
			$('.flexslider').flexslider();
		});
	</script>

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.

<!-- Include CSS for Flexslider -->
<link rel="stylesheet" href="deinpfad/slider/flexslider.css" type="text/css" media="screen" />

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:

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

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 if (is_front_page() ) : ?>
Deinen Slider-Code hier...
<?php endif  ?>
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!

34 Kommentare

  1. Hier meine Lösung, damit man den FlexSlider einsetzen kann:

    <div class="flexslider">
    	<ul class="slides">
    	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    		<li>
    			<a href="<?php the_permalink(); ?>">
    			<?php
    				//This must be in one loop
    				if(has_post_thumbnail()) {
    				echo '<img src="'.wp_get_attachment_url(get_post_thumbnail_id($post->ID )).'">';
    				} else {
    				echo '<img src="'.get_bloginfo("template_url").'/gfx/default-artikelbild.png" />';
    				}
    			?>
    			<h1 class="flex-caption"><?php the_title() ?></h1>
    		</li>
    	<?php endwhile; endif; wp_reset_query(); ?>
    	</ul>
    </div>
    

    Hoffe das hilft weiter. ;)

    • Hallo Vincent,

      danke für deinen Kommentar. Über die Images im Theme-Ordner des Sliders könntest du die Buttons recht leicht ändern und einen eigenen Style erstellen. Vor allem, wenn man die Größen der verwendeten Bilder beibehält, muss man die Bilder nur austauschen.

      Viele Grüße,
      Ellen

    • Hallo Dominik,

      ich denke du könntest den HTML-Code des Sliders auch direkt in ein normales Text-Widget einfügen. Ich habe das allerdings noch nicht selbst ausprobiert. Der restliche Code würde gleich bleiben und deine Images würdest du dann ja auch nicht so groß benötigen.

      Viele Grüße,
      Ellen

    • Hallo Andre,

      ich denke über eine statische Seite als Startseite und mit der Anleitung hier könntest du den Slider relativ leicht integrieren. Du könntest den benötigten HTML-Code für den Slider auch direkt in die Seite einbinden.

      Viele Grüße,
      Ellen

      • Hallo liebe Ellen,

        ich werde mein Glück versuchen!
        Immerhin habe ich den widgetized responsive Footer auch hinbekommen. ;-)

        Hast Du denn noch eine Idee, wie ich auf einer statischen Full-Width Seite eine “responsive” Tabelle einfügen kann?

        Ich möchte gerne 3 kleine Kästchen haben, in denen ein Text drinsteht. Diese 3 Kästchen sollten nebeneinander stehen, nur mobile dann untereinander angezeigt werden. Hast Du da eine Idee?

        Ich werde Dich über meine Versuche auf dem Laufenden halten! :-)

        Liebe Grüße und einen tollen Tag für Dich!

        André

  2. Pingback: WordPress Gallery mit Flexslider | GlückPress

  3. Hendrik

    Hallo,
    klasse Artikel..prima, vielen Dank dafür Ellen.

    Gäbe es evtl. die Möglichkeit horizontale und vertikale Bilder miteinander zu kombinieren? Hat sich damit mal jemand beschäftigt. Habe leider nichts im FlexForum finden können.

    Problem dabei ist das sich der Rahmen bei horizontalen Bildern natürlich nicht automatisch anpasst und somit das Bild links-oben platziert wird und die rechte Seite weiss bleibt. Wäre das nicht eine interessante Erweiterung für den FlexSlider? :)

    Schöne Woche noch,
    Hendrik

  4. Christian

    Hi Ellen,
    Vielen Dank für das Tutorial und den Hinweis zu den weiteren Anpassungen.
    Ich möchte zusätzlich einen responsiven Hintergrund hinter dem Slider haben der über die ganze Breite verläuft. Er sollte sich dann auch entsprechend der veränderten Höhe auch anpassen. Hast du eine Idee wo man da am CSS schrauben müsste?
    Ich hoffe du denkst nicht, das ich dich als Supportforum missbrauchen möchte.
    Aber bei WordPress-Fragen lande ich zum Schluß immer wieder auf eure Seite. Ihr seid schon eine Instanz geworden!
    Oder vielleicht hat ja auch ein Leser eine Idee?
    Vielen Dank,
    Schöne Grüße,
    Christian

  5. dahans

    Hallo,

    ich hab mal eine ganz andere Frage, ich bin hobby webdesigner und habe den Felxslider in meine Website intergriert soweit auch alles geklappt.
    Jetzt habe ich aber einige andere Probleme wie zB. andere Javascript dateien einzubinden, auf Seiten bei denen kein Felxslider eingebunden wird funktionieren diese nur nicht auf der Seite wo eben der böse :P Flexslider ist.
    Habt ihr evtl einen Tipp ?

    vielen Dank und Grüße

  6. liest sich gut, aber: was kann ich machen, damit der Flexslider auch im Dashboard erscheint? Möchte den slider fest in ein Theme integrieren, aber natürlich auch mit Anpassungsmöglichkeiten: Bilder, Texte, Breite, Höhe etc. Das Ganze scheint mir noch ein bisserl unausgegoren oder irre ich hier völlig? Falls ja, pardon. Mir fehlen noch die Einträge in der functions.php, damit der Slider halt auch in der Dashboard Navi erscheint und ichj oder ein Kunde den slider bearbeiten kann. Wie integriere ich ihn denn an der erforderlichen Stelle?
    ?

  7. Chris

    Ich habe mal eine Frage betreffend dem Flexslider, vielleicht sehe ich ja den Wald vor lauter Bäumen nicht. Bzw. vielleicht stelle ich mich auch einfach nur doof an :D

    Ich einen Flexslider nutzen, der jedoch (leider) mit vielen Bildern gefüttert wird, die sich auch nicht mehr weiter komprimieren lassen. Das führt dazu das rund 1,5mb geladen werden müssen. Was je nach Bandbreite schon seine Zeit benötigt.

    Nun dachte ich mir: laden “wir” doch einfach die Listenelemente mit den Bildern per JS nach und umgehen somit das Problem das auf einen Schlag alle Bilder geladen werden sollen/müssen.

    Nun habe ich jedoch das kleine Problem, das ich den Flexslider nicht animieren kann die nachträglich eingefügten Listenelemente auch nur ansatzweise zu beachten. :(

  8. Arno

    Hallo Ellen,

    Ich habe mir das Theme “ClassicPress” zugelegt, welches auch den “FlexSlider” in der Demo nutzt.
    http://www.mojo-themes.com/item/classicpress-responsive-magazine-wordpress-theme/demo/

    Ich würde den FlexSlider gerne in das Theme integrieren und zwar so das er die letzten 5 neuen Artikel anzeigt. Hast du eine Idee wie ich das Einbinden könnte – ursprünglich habe ich gedacht es wäre ein WordPress-Plugin das man einfach installieren und mittels Shortcode bequem einbinden kann.

    Wenn du mir helfen könntest, wäre ich dir sehr dankbar.

    Lieben Gruß
    Arno

    • Unfassbar, genau danach habe ich lange gesucht und genauso lange so gut wie nichts Brauchbares finden können.
      Ich habe mich immer schon gefragt, warum man zusätzliche Plugins wie NextGen-Gallery und Konsorten benutzen sollte. Gerade jetzt, wo die native Galerie im Backend wirklich ansehnlich geworden ist.

      Vielen Dank Casper! Nutzt dein Plugin die neueste Version vom Flexslider?

  9. Hallo Ellen
    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

  10. Hallo Ellen,

    vielen lieben DANK!
    Vielleicht kannst Du mir auch helfen?

    Wie kann man den die Bilder des Flexslider-Bilder als Vorschau-Bilder für Facebook verwenden. Wenn man z.B: einen Beitrag auf Facebook teilen möchten.

    Vielen DANK!

    Grüße
    Adrian

Schreibe eine Antwort