CHECK5-Hilfe::FlexSlider

Installation

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.

Um die notwendigen Dateien in CHECK5 zu installieren stellen wir diese hier zum Dowload bereit.
Entpacken Sie das ZIP-File und übertragen Sie folgende Datei über Daten -> Dateien in ihren CHECK5-Account.

1. jquery.flexslider.min.js
2. bg_direction_nav.png
3. loader.gif

Öffnen Sie die Datei flexslider.css und übertragen Sie den Inhalt in die
style_private_IHR-LAYOUT.css

Folgender Inhalt muss an des Ende von <body> übertragen werden.

<script type="text/javascript">
	$(document).ready(function(){
	 $('.flexslider').flexslider({
        animation: "slide",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
	});
</script>

Formatierungen

Um z.B. alle weiteren Anzeigen des Sliders auszuschalten können Sie folgenden Code an das Ende der
style_private_IHR-LAYOUT.css einsetzen bzw. den vorhandenen des Flexsliders anpassen:

.flex-control-nav, .flex-control-paging, .flex-direction-nav{display:none;}

Der Slider mit seinen Daten

Am besten erstellen Sie einen Baustein mit folgendem Inhalt.

<div class="flexslider">
    <ul class="slides">
        <li>
            <!--Nur das Bild -->
            <img src="http://IHRE-DOMAIN.TLD/files/BILD1.EXT" alt="" />
        </li>
		<li>
            <!-- mit einem Link zu einer Seite -->
            <a href="http://DER-LINK" target="_blank"><img src="http://IHRE-DOMAIN.TLD/files/BILD2.EXT" alt="" /></a>
        </li>
		<li>
            <!-- Mit Bildunterschrift -->
            <img src="http://IHRE-DOMAIN.TLD/files/BILD3.EXT" alt="" />
            <p class="flex-caption">Eine Bildunterschrift</p>
        </li>
    </ul>
</div>

Selbstverständlich lassen sich auch alle Varianten miteinander kombinieren. Den Baustein nun noch in einen Artikel einsetzen um den Slider anzuzeigen. Dies geht dann natürlich auch über Artikelboxen ausserhalb des Contentbereichs.