I am trying to design a carousel like this
and I followed the Javascript slider tutorial on Neos, but I am unable to add the images to the carousel, and also it’s not keeping the same CSS despite having the same classes. See here. I am not sure if this is a bootstrap issue, but see my code here.
CarouselItem.html
{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace media=TYPO3\Media\ViewHelpers}
<div{attributes -> f:format.raw()}>
<f:if condition="{image}">
<f:then>
<media:image image="{image}" alt="{alternativeText}" title="{title}" maximumWidth="{maximumWidth}" maximumHeight="{maximumHeight}" />
</f:then>
<f:else>
<img src="{f:uri.resource(package: 'Country.Germany', path: 'Images/dummy.png')}" title="Dummy image" alt="Dummy image" />
</f:else>
</f:if>
<div class="carousel-caption">
<f:if condition="{hasCaption}">
{neos:contentElement.editable(property: 'caption')}
</f:if>
</div>
</div>
Carousel.html
{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace ts=TYPO3\TypoScript\ViewHelpers}
<div{attributes -> f:format.raw()}>
<div class="cover-fade-out"></div>
<div class="content-body" id="detail-house">
<div class="carousel slide" id="{node.identifier}" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<f:for each="{carouselItemArray}" as="item" iteration="itemIterator">
<li data-target="#{node.identifier}" data-slide-to="{itemIterator.index}" class="{f:if(condition: itemIterator.isFirst, then: 'active')}"></li>
</f:for>
</ol>
<!-- Wrapper for slides -->
{carouselItems -> f:format.raw()}
<!-- Controls -->
<div class="carousel-caption">
<div class="container">
<p>Editio Exclusiv</p>
<a class="left carousel-control" href="#{node.identifier}" role="button" data-slide="prev">
<img src="{f:uri.resource(path:'Images/left.png',package:'Country.Germany')}" class="img-responsive">
</a>
<a class="right carousel-control" href="#{node.identifier}" role="button" data-slide="next">
<img src="{f:uri.resource(path:'Images/right.png',package:'Country.Germany')}" class="img-responsive">
</a>
</div>
</div>
</div>
</div>
</div>
Carousel.ts2
prototype(Country.Germany:Carousel) {
carouselItems = TYPO3.Neos:ContentCollection {
nodePath = 'carouselItems'
content.iterationName = 'carouselItemsIteration'
attributes.class = 'carousel-inner'
}
// Collect the carousels children but only images
carouselItemArray = ${q(node).children('carouselItems').children('[instanceof TYPO3.Neos.NodeTypes:Image]')}
// Enhance image prototype when inside the carousel
prototype(TYPO3.Neos.NodeTypes:Image) {
// Render images in the carousel with a special template.
templatePath = 'resource://Country.Germany/Private/Templates/NodeTypes/CarouselItem.html'
// The first item should later be marked as active
attributes.class = ${'item' + (carouselItemsIteration.isFirst ? ' active' : '')}
// We want to use the item iterator in fluid so we have to store it as variable.
iteration = ${carouselItemsIteration}
}
}