当前位置：文江博客话题详情

自动调整产品大小。轮播

发布于 2024-10-22 05:35:09 字数 238 浏览 4 评论 0原文

我正在尝试 Products.Carousel。我为我的主页创建了一个轮播，并添加了两个横幅，它们在 n 秒后自动旋转。

问题是我应该在轮播设置中设置宽度和高度，或者将这些值留空以使用第一个横幅的值。

我希望轮播对主要内容区域使用相同的宽度。我尝试设置一个固定值，但当然它不会在不同的分辨率下工作（横幅可能会侵入正确的 portlet 区域，或者对于主要内容宽度来说可能太短）。

关于如何解决这个问题有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空城之時有危險 2024-10-29 05:35:09

您应该能够通过覆盖 Products.Carousel.viewlet （在文件系统代码中或在 Portal_view_customizations 中）为 Carousel 提供可变宽度。您可能希望将轮播宽度基于另一个元素的宽度，例如 #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>

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>

回复收藏 0 原文