xpages carousel with dynamic content

Question

Is it possible to feed the xe:carousel control from the Extension Library with dynamic content?

At first it seems the slide nodes can only be set static?

Answer 1

I recently posted this as an answer to someone who wanted a dynamic Dashboard control, to give them ideas

<xp:this.afterPageLoad><![CDATA[#{javascript:
    importPackage(com.ibm.xsp.theme.bootstrap.components.responsive);

    var photos = [["http://www.gstatic.com/webp/gallery/1.jpg","My Caption 1"]];
    photos.push(["http://www.gstatic.com/webp/gallery/2.jpg","My Caption 2"]);
    photos.push(["http://www.gstatic.com/webp/gallery/3.jpg","My Caption 3"]);
    photos.push(["http://www.gstatic.com/webp/gallery/4.jpg","My Caption 4"]);
    photos.push(["http://www.gstatic.com/webp/gallery/5.jpg","My Caption 5"]);

    var carousel:com.ibm.xsp.theme.bootstrap.components.responsive.UICarousel = getComponent("carousel1");

    for(var i = 0; i < photos.length; i++) {
        var data = photos[i];

        var slide:com.ibm.xsp.theme.bootstrap.components.responsive.SlideNode = new com.ibm.xsp.theme.bootstrap.components.responsive.SlideNode();
        slide.setBackgroundSrc(data[0]);
        slide.setCaptionText(data[1]);
        slide.setButtonLabel("Open This Image");
        slide.setButtonHref("/photo.xsp?photo=" + data[0]);
        carousel.addSlideNode(slide);
    }}]]>
</xp:this.afterPageLoad>

<xe:carousel id="carousel1" wrapped="true" pause="hover" slideInterval="2000">
</xe:carousel>

The key is to first get a reference to the component underlying the Carousel control, UICarousel. Then create some SlideNode components, setting their configuration options as desired, and add them to the UICarousel component.