How to set a culling strip for horizontal carousel

[jaikumartj]

In sample project, carouselComponent has a method called " setcarouselnavigatorandwidgetstrip() " which sets different types of widget strip. how to implement such methods for horizontal carousel (ie.to use CULLING mode in horizontal carousel)

[subsidel]

The example application is already doing this.

You set the Carousel orientation to Carousel.orientations.HORIZONTAL and then call setWidgetStrip on the carousel, passing in CullingStrip component.

This will set up the carousel to be horizontal and using a culling strip.

http://bbc.github.io/tal/widgets/carousel.html https://github.com/bbc/talexample/blob/master/static/script/appui/components/carouselcomponent.js#L105

[jaikumartj]

instead of using that example application, i've created a carosel and used setwidgetStrip(CullingStrip). I'm not getting any output. should i add anything else to make a culling strip in carousel

[jaikumartj]

scrollinggridwidget.txt To this component I'm trying to add a culling strip, but I'm not getting any output

[jaikumartj]

I'm trying to create horizontal carousels inside vertical carousel with culling widgetstrip but I'm not getting any output because of the function setwidgetStrip (). How to solve this?

[subsidel]

If using these strips it is compulsory to set widget lengths before performing an alignment. It may also be necessary to set the ‘Mask length’ (the size of the mask opening). Normally this length is measured from the DOM, but if the DOM is not ready when the first carousel alignment is made, then no items will be displayed unless the mask length has been explicitly set beforehand.

[jaikumartj]

we tried to create the carousels of carousel as in the below formatter and we tried to set widget length as well but still there is no output test_carousel_formatter.txt

[bastuijnman]

You're overriding the widget strip you just populated by doing:

this._carousel.setWidgetStrip(CullingStrip);

I suggest doing it directly after creating the carousel itself.

[jaikumartj]

we tried to set length and culling strip right after the creation of carousel, we are not getting any output

[jaikumartj]

we are trying to create a nested carousel(like a grid) and want both to be in culling. If it is working for you, please send us code

[bastuijnman]

We can't really know what you're doing based on only the formatter code. We have nested carousels without any problem, but that's all business code that we're not going to share.

The only real problem that I saw in your shared code was that the widget strip was overwritten at the end of end of the format function, if that's not the problem then it's somewhere else in your own logic. I would suggest setting breakpoints in your code to see whether your carousel is actually filling with the data you want.

If you don't have your editor/IDE connected to your browser then this is an easy way to do so: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger

[jaikumartj]

we are getting the output only if we dont set CullingStrip for inner carousel. we wanted both outer and inner carousel to have CullingStrip. carousel component is vertical carousel and we have commented "todo" in certain lines, it takes in carousel formatter and that creates horizontal carousel. the formatter for horizontal carousel is simple formatter. we want both the carousel to be in culling. please refer to these files

test_carousel_formatter.txt test_carousel_simple_fromatter.txt test_carousel_component.txt

[bastuijnman]

You're still setting the culling strip last in the test_carousel_formatter.txt file

Also, set breakpoints using the debugger statement, it will help you figure out what's going on. Which is way more valuable then me looking at your code for the problem

[jaikumartj]

we tried to set even after the carousel declaration line, still it is not working

[bastuijnman]

Then set debugger statements after every important to see what's going on in the carousels themselves to figure out what's going wrong. Maybe there is something wrong with your datasource calls, maybe there is something wrong with the order of setting the carousel, who knows.

There is just too much going on in your code samples to quickly spot the problem.

[basimman]

Hi bastuijnman, I am also facing the same issue, Nested carousel is not working, when I set it to CULLING strip. Is it possible to share the sample nested carousel formatter with us. I have followed the way mentioned in the document to create the Culling carousel, but no use with setting mask height and widgets length.

[deepak-pk]

Hi i had the same problem. i was not attaching Button to the carousal formatter. once i added a button type to the Formatter.format returned object it works. hope it helps.

[kukulaka]

We have deprecated this project and there are no plans for active development going forward.

Please see the deprecation notice.