Carousel slider with any content element

Creating Neos & Flow Code
1

Hi, i am trying to implement a slider which can use every content element defined in neos. so i made some kind of typoscript like this:

prototype(Site:Carousel) < prototype(TYPO3.Neos:Content) {
templatePath = 'resource://…/TypoScriptObjects/Carousel.html’
carouselItems = TYPO3.TypoScript:Collection {
itemName = 'elements’
collection = ${q(node).children().children()}
itemRenderer = TYPO3.TypoScript:Template {
templatePath = 'resource://…/TypoScriptObjects/CarouselItem.html’
elements = ${elements}
}
}
}

In the CarouselItem Template i got a node element. How do i render them into content? Or can i wrap ContentCollection items?

2

Hi @hd77,

check this example: http://neos.readthedocs.org/en/stable/HowTos/IntegratingJavaScriptSlider.html

as far as I know you just simply can adapt the query for the carouselItemArray such it does not only collect Images nodes but also other nodes, for example TYPO3.Neos:Content which is like the parent content node type.

3

Yes i saw that allready, but i have to define a template and skript for each nodetype i want to use in the slider. It should be unnecessary because i allready have templates for each NodeType. I just want to wrap them. So i used TYPO3.TypoScript:Collection. But i dont know how to render the default template. Only ContentCollection does it right. Maybe i can use some kind of viewhelper to render the default template of each contentelement?

5

I found the solution here:

https://forum.typo3.org/index.php/t/203293/-neos-wrapping-each-children-of-contentcollection-with-custom-markup

I needed to use the ContentCase.

prototype(Site:Carousel) < prototype(TYPO3.Neos:Content) {
templatePath = ‘resource://…/TypoScriptObjects/Carousel.html’
carouselContent = TYPO3.TypoScript:Collection {
collection = ${q(node).children(’[instanceof TYPO3.Neos:ContentCollection]’).children()}
itemRenderer = Site:CarouselItem
itemName = ‘carouselItem’
}
carouselItemArray = ${q(node).children(‘carouselItems’).children()}
}
prototype(Site:CarouselItem) < prototype(TYPO3.Neos:Content) {
templatePath = 'resource://…/TypoScriptObjects/CarouselItem.html’
itemContent = TYPO3.TypoScript:Collection {
collection = ${q(carouselItem)}
itemName = 'node’
itemRenderer = TYPO3.Neos:ContentCase
}
}

6

Is there an updated version of this code for the latest neos?

7

I think the current Neos Demo has a slider example

8

There is also a package for it. Called neos.slick :wink:

https://packagist.org/packages/unikka/neos-slick

9

Thank you guys.