Für ein aktuelle Projekt brauchte ich einen Bilder-Slider im Header. Meine sonstigen Slider sind eher als Content-Elemente gedacht. Daher habe ich mich mit dem Bootstrap Carousel beschäftigt.

Der Slider soll mit dem Bildern aus der Seiteneigenschaft Resourcen arbeiten. Zur Vereinfachung gehe ich einfach davon aus, dass er die ersten drei Bilder benutzt. Bei Gelegenheit muss ich mir dann auch einmal Gedanken über eine Schleifenstruktur durch die vorhandenen Bilder machen.

Mit einer festen Zahl ist die Lösung recht einfach:

 lib.field_headerimage = COA
   lib.field_headerimage.10 = TEXT
   lib.field_headerimage.10.value (
     <div id="skiplink">
     <a class="skip" title="Direkt zur Navigation springen" href="#navigation">Zur Navigation springen</a><br>
     <a class="skip" title="Direkt zum Content springen" href="#content">Zum Content springen</a>
     </div>

    <div id="blogo">
     <a href="/"><img src="fileadmin/user_upload/Logo_trans.png" /></a>
    </div>
    <div id="hslider" class="carousel slide carousel-fade">
    <div class="carousel-inner">
   )

   lib.field_headerimage.20 = IMG_RESOURCE
   lib.field_headerimage.20 {
    file.import.data = levelmedia:2, slide
    file.treatIdAsReference = 1
    file.import.listNum = 0
    stdWrap.wrap = <div class='item active'><a href='/'><img src='|' style='width: 100%;' /></a></div>
   }

   lib.field_headerimage.30 = IMG_RESOURCE
   lib.field_headerimage.30 {
     file.import.data = levelmedia:2, slide
     file.treatIdAsReference = 1
     file.import.listNum = 1
     stdWrap.wrap = <div class='item'><a href='/'><img src='|' style='width: 100%;' /></a></div>
   }

   lib.field_headerimage.40 < lib.field_headerimage.30 
   lib.field_headerimage.40.file.import.listNum = 2
 
   lib.field_headerimage.90 = TEXT
   lib.field_headerimage.90 {
   value = {$styles.content.hspeed}
   wrap (
     </div></div>
     <script type='text/javascript'>$(document).ready(function(){
     $("#hslider").carousel({interval: |});
    });</script>
  )
}

Im ersten Textbereich werden ein paar Standars-Zeilen generiert und dann der Kopf des Carousels definiert. Über das Javascript im letzten Block wird das Carousel aktiviert. Grundsätzlich kann man das Carousel über Javascript oder folgenden Datenblock aktivieren:

<div id="hslider" class="carousel slide carousel-fade" data-ride="carousel" data-interval="5000">

Ich habe die Version per Javascript benutzt, einfach weil sich das aus meiner Vorlage so ergab und mir nicht klar war, ob das auch mit dem Fade funktioniert. Bei Gelegenheit werde ich aber auf die andere Variante ohne Javascript umstellen.

Normalerweise scrollen die Bilder, mit dem Fade-Effekt kommt es zu einer weicheren Überblendung.