Hallo,
hab mir ein Tutorial von Oliver Thiele angesehen wo er einen HeaderSlider fon Bootstrap für ein Fluidtemplate nur mit TS zusammenbaut.
Leider kann ich mein benötigtes HTML für den HeaderSlider den ich brauche nicht so umsetzen weil hier das Hintergrundwissen fehlt und das im Tutorial nicht so richtig rauskommt...
Ich möchte gerne dieses HTML im TS Abbilden:
<div class="main-slider">
<div class="slider">
<div class="camera_wrap">
<div data-src="images/slide-2.jpg">
<div class="camera_caption caption-1 fadeIn">
Mitten Im nirgendwo...
<span>Der schönste Fleck auf Erden.</span>
</div>
</div>
</div>
</div>
</div>
Oliver Thiele hat dieses TS dafür verwendet, was muss ich ändern das mein HTML dan auch funktioniert?
Vielen vielen Dank schon jetzt für Eure Hilfe!!!
lib.FceSlider = COA
lib.FceSlider {
1 = LOAD_REGISTER
1.counterItemSlider = 0
2 = LOAD_REGISTER
2.firstItemSliderClass = active
10 = FILES
10 {
references {
table = tt_content
uid.data = field:uid
fieldName = image
}
stdWrap.dataWrap = <div id="myCarousel{field:uid}" class="carousel slide"><ol class="carousel-indicators">|</ol><div class="carousel-inner">
renderObj = COA
renderObj {
10 = TEXT
10 {
value = <li data-target="#myCarousel{field:uid}" data-slide-to="{register:counterItemSlider}"
insertData = 1
}
12 = TEXT
12 {
data = register:firstItemSliderClass
required = 1
noTrimWrap = | class="|" |
}
15 = TEXT
15.value = ></li>
# Das Register mit der CSS-Klasse active löschen
20 = RESTORE_REGISTER
# Zähler um 1 erhöhen
25 = LOAD_REGISTER
25 {
tempN {
data = register:counterItemSlider
wrap = |+1
}
counterItemSlider.data = register:tempN
counterItemSlider.prioriCalc = 1
}
# Register um einen Eintrag erhöhen, der in der Schleife wieder gelöscht wird (Object 20)
30 = LOAD_REGISTER
30 {
temp = 1
}
}
}
15 = LOAD_REGISTER
15.firstItemSliderClass = active
# Carousel items
20 = FILES
20 {
references {
table = tt_content
uid.data = field:uid
fieldName = image
}
renderObj = COA
renderObj {
10 = TEXT
10.value = <div class="item {register:firstItemSliderClass}">
10.insertData = 1
20 = IMAGE
20 {
file {
import.data = file:current:originalUid // file:current:uid
height = 400c
width = 2003
}
}
30 = TEXT
30 {
value (
<div class="carousel-caption">
<h4>{file:current:title}</h4>
<p>{file:current:description}</p>
</div>
)
if.isTrue.cObject = TEXT
if.isTrue.cObject {
# sobald nur ein Feld Inhalt hat, wird dem isTrue eine Zeichenkette zurückgegeben
value = {file:current:title}{file:current:description}
insertData = 1
}
insertData = 1
}
40 = TEXT
40.value = </div>
50 = RESTORE_REGISTER
}
}
30 = TEXT
30 {
value (
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel{field:uid}" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel{field:uid}" data-slide="next">›</a>
</div>
)
insertData = 1
}
}