Zum Inhalt springen

TYPO3 Bootstrap Slider selber erstellen

1. Neben der Datei bootstrap.css müssen bootstrap.js und jQuery eingebunden werden. JQuery ist oft schon durch TYPO3 oder eine andere Extension vorhanden. Die Javascript-Dateien sollten in den Footer gesetzt werden.

2. Folgenden Code ins Page-Tsconfig der root-Seite einbinden:

TCEFORM.tt_content.section_frame {
  addItems.200 = Slider
}

3. Folgendes Typoscript einbinden:

# Code 1 #################
lib.slider = COA
 
##### 1. Zugriff auf die Bilder
lib.slider.10 = FILES
lib.slider.10.references {
  table = tt_content
  #####UID der Bilder
  uid.data=field:uid
  fieldName = image
}
 
##### 2. Ausgabeiteration der Buttons steuern
lib.slider.10.renderObj = TEXT
lib.slider.10.renderObj {
    value = {register:FILE_NUM_CURRENT}
    insertData = 1
    dataWrap = <li data-target="#carousel-example-generic{cObj:parentRecordNumber}" data-slide-to="|" class="active"></li>|*|<li data-target="#carousel-example-generic{cObj:parentRecordNumber}" data-slide-to="|" class="">
</li>|*|<li data-target="#carousel-example-generic{cObj:parentRecordNumber}" data-slide-to="|" class=""></li>
}
##### 3. Container um den gesamten lib.slider.10
lib.slider.10.stdWrap.wrap3 =  <ol class="carousel-indicators">|</ol>
lib.slider.20 < lib.slider.10
lib.slider.20.renderObj = COA
##### 4 Das Bild wird geladen
lib.slider.20.renderObj.10 = IMAGE
lib.slider.20.renderObj.10 {
    file.import.data = file:current:publicUrl 
##### 4.1 Das Bild erhält Alt-Text und Titel aus den Bildeigenschaften
    altText.data = file:current:alternative
    altText.htmlSpecialChars = 1
    titleText.data = file:current:title
    titleText.htmlSpecialChars = 1
  }
lib.slider.20.renderObj.15 >
 
##### 4.2 Aus dem Feld "Description“ wird ein Caption-Text erzeugt, der einen Link mit der im Linkfeld eingetragenen Adresse erhält
lib.slider.20.renderObj.20 = TEXT
lib.slider.20.renderObj.20 {
    stdWrap.data = file:current:description
    stdWrap.removeBadHTML = 1
    stdWrap.typolink.parameter.data = file:current:link    
##### 4.3 Container um die Caption    
    dataWrap = <div class="carousel-caption active">|</div>|*|<div class="carousel-caption">|</div>|*|<div class="carousel-caption">|</div>
  }
##### 4.4 Container um die Bilder und Captions, das erste Element erhält eine andere Klasse als die anderen
lib.slider.20.renderObj.wrap = <div class="item active">|</div>|*|<div class="item">|</div>|*|<div class="item">|</div>
 
##### 4.5 Container um den gesamten lib.slider.20
lib.slider.20.stdWrap.wrap3 =  <div class="carousel-inner">|</div> 
 
##### 5. Container um des gesamte Element
lib.slider.stdWrap.dataWrap (
  <div id="carousel-example-generic{cObj:parentRecordNumber}" class="carousel slide" data-ride="carousel">
|
  <a class="left carousel-control" href="#carousel-example-generic{cObj:parentRecordNumber}" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic{cObj:parentRecordNumber}" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
  </div>        
)

# Das Standard-Imagerenderung wird in einer Variablen gespeichert.
 
lib.imagerendering < tt_content.image.20
 
#Das Imagerendering wird zum CASE-Objekt. Wenn im Feld Section Frame die Option #Slider angewählt wird, werden die Bilder als Slider ausgelesen. Ansonsten wird #das Imagerendering in den Standardzustand zurückversetzt. 
 
tt_content.image.20 = CASE 
tt_content.image.20  {
    key.field = section_frame
    200 < lib.slider
    default < lib.imagerendering
}
# Stellt bei "Text mit Bild"  die Textausgabe wieder her. 
tt_content.textpic.20  =< lib.imagerendering

Fertig!

Um eine Slideshow zu erstellen einfach ein Content Element “Bild” erstellen und Bilder hinzufügen.

 

 

Quelle: http://www.ambranet.de/blogpost/cms/bootstrap-karussell-bilderslider-aus-typo3-contentelementen.html

Sei der Erste der einen Kommentar abgibt

Schreibe einen Kommentar