Auto resizing for Products.Carousel

I am trying out Products.Carousel. I created a Carousel for my homepage,and added two Banners, which rotate automatically after n seconds.

Problem is I am supposed to set the wi开发者_开发知识库dth and height in the Carousel settings, or leave those values blank to use the ones for the first banner.

What I wished is that the carousel used the same width for the main content area. I tried to set a fixed value, but of course it won't work in different resolutions (the banners might invade the right portlet area, or might be too short for the main content width).

Any ideas on how I can work this around?

You should be able to give the Carousel a variable width by overriding Products.Carousel.viewlet (either in filesystem code or in portal_view_customizations). You'll probably want to base the Carousel width on the width of another element, like the #content div:

<div tal:condition="view/available"
    tal:attributes="id view/element_id;"
    class="carousel">
    <tal:banners tal:define="banners view/banners;"
        tal:condition="banners"
        tal:content="structure banners">
        Banners
    </tal:banners>
    <tal:pager tal:define="pager view/pager;"
        tal:condition="pager"
        tal:content="structure pager">
        Pager
    </tal:pager>
    <script type="text/javascript" charset="utf-8" tal:content="string:
        (function ($$) {
            $$('#${view/element_id}').ploneCarousel({
                height: ${view/height},
                width: $$('#content').width(),
                transition: '${view/transition}',
                speed: ${view/speed},
                delay: ${view/delay}
            });
        })(jQuery);
    ">
    </script>
</div>

I don't have an answer, only ideas.

• can you set a class on the banner area that will set its width the same as the main content area?
• can you use a % width?

or the evil, but successful, method I've used:

• flash banner using swfobject.js