Typo3 Neos: How to build a custom content slider?

Question

I want to integrate a custom content slider. Therefore i have read the documentation: http://docs.typo3.org/neos/TYPO3NeosDocumentation/IntegratorsCookbook/IntegratingJavaScriptSlider.html

I think this should render the slides array:

<!-- Wrapper for slides -->
{carouselItems -> f:format.raw()}

My question is now how can i render a simple slide. A Slide could contain any NodeTypes. In the example only Images are rendered. But i need to access any NodeType.

Html (Sites/Vendor.Site/Private/Templates/TypoScriptObjects/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: 'TYPO3.Neos', path: 'Images/dummy-image.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>

Edit

My content slider has the following DOM-Structure: Every thing in the jkslide div has nothing to do with the slider.

<div class="jkslider">
    <div class="jkslide">
        <p>The first slide element could be an image with a header underneath</p>
        <img src="layout/wallpaper-1-1600-900.jpg">
        <h2>Wallpaper 1, Width: 1600, Height: 900</h2>
    </div>
    <div class="jkslide">
        <div class="row">
            <div class="span6>
                <p>First column text</p>
            </div>
            <div class="span6>
                <p>Second column text</p>
            </div>
        </div>
    </div>
    <div class="jkslide fade">
        Some Text<br>
        <div class="someclass2">
            <div class="somelcass3">
                  Text
            </div>
        </div>
    </div>
</div>

One slide item should be rendered this way: One slide item should also be a content collection i think!?!?

<div class="jkslide">
    Here i want to print the raw node type / content collection? 
</div>

With that code i will get the slide items.

sliderItemArray = ${q(node).children('sliderItems').children()

So now i need to display these children. But remember the child could be anything from an image to normal text or a two column element.

Hope i have now explained my problem a little bit better.

Answer 1

EDIT 2

Could this be a solution to your question?

Step 1: Update the Page nodetype in Vendor.Site/Configuration/NodeTypes.yaml

'TYPO3.Neos.NodeTypes:Page':
  childNodes:
    firstContainer:
      type: 'TYPO3.Neos:ContentCollection'
    secondContainer:
      type: 'TYPO3.Neos:ContentCollection'
    thirdContainer:
      type: 'TYPO3.Neos:ContentCollection'
      

Step 2: Update the body section of Page typoscript template in Vendor.Site/Resources/Private/TypoScripts/Library/Root.ts2

content {
    firstContainer = ContentCollection {
        nodePath = 'firstContainer'
    }
    secondContainer = ContentCollection {
        nodePath = 'secondContainer'
    }
    thirdContainer = ContentCollection {
        nodePath = 'thirdContainer'
    }
}

Step 3: Update your template file by adding the containers in the div classes you want like this

<div class="jkslider">
    <div class="jkslide">
        {content.firstContainer -> f:format.raw()}
    </div>
    <div class="jkslide">
        <div class="row">
            {content.secondContainer -> f:format.raw()}
        </div>
    </div>
    <div class="jkslide fade">
        {content.thirdContainer -> f:format.raw()}
    </div>
</div>

Step 4: Use ./flow node:autocreatechildnodes --node-type TYPO3.Neos.NodeTypes:Page

If you want to have extra divs (like <div class="span6">) inside your containers you can extend the nodetype you want to use to have an extra field/variable and use that variable in the html as a {class}.