Carousel not working

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.


{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace media=TYPO3\Media\ViewHelpers}
<div{attributes -> f:format.raw()}>
        <f:if condition="{image}">
                        <media:image image="{image}" alt="{alternativeText}" title="{title}" maximumWidth="{maximumWidth}" maximumHeight="{maximumHeight}" />
                        <img src="{f:uri.resource(package: 'Country.Germany', path: 'Images/dummy.png')}" title="Dummy image" alt="Dummy image" />
        <div class="carousel-caption">
                <f:if condition="{hasCaption}">
                        {neos:contentElement.editable(property: 'caption')}


{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>

                <!-- 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 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">


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}

I suppose the code of Carousel.html has crept into Carousel.ts2. Looks same. Maybe only in forum?

You could also use the carousel from the Weissheiten.Neos.Bootstrap packet or get inspired by it.

1 Like

Sorry about that, just edited it.

Ok thanks much, taking a look

I don’t know the [quote=“maschad, post:1, topic:1272”]
Javascript slider tutorial on Neos
, but first of all, looks like it would do like it should, if no image is defined.

  • So if one <img>-Tag (CarouselItem) has class «item active», your prototype in Carousel.ts2 seams to work. Then you have to check, if there is at least one CarouselItem with an choosen image defined.
    <f:debug>{whatYouAreLookingFor}</f:debug> could help for.

  • Otherwise something is wrong with your ts2-file, maybe.

  • CSS you have to figure out with dev-tools. Maybe wrong file-including: then classes are useless.

Otherwise, could be, the tut has an error in, or there are to less information within, to do easy and errorless step-by-step-work? But I don’t know the tutorial …
Seams a lot of opportunities to get unwanted or incorrect output. In forum, without the generated sourceCode and the possibility to check things direct in when change something, it could be hard to find the particular cause(s). Weisheiten carousel could be the less painful way…

But I don’t think it is a bootstrap issue. There are a view people out there, who work with. I guess an bootstrap-issue in general would be already discovered and fixed.

1 Like

I am still having the same problem no matter what I change, how am I supposed to add images to the carousel?