Question

我在kentico 9上实现了一个bootstrap 3轮播，如果只剩下一个项目，如果只剩下一个项目需要一些自动隐藏轮播控件（包括圆圈指示符和下一个/上一个箭头）的帮助，如果可能。

我为旋转木马所做的是为此设置新的页面类型，其中每个横幅都是/ hero /文件夹下的内容树中的页面。然后使用2个中继器：第一个显示圆圈指示器;第二个显示横幅信息。一切顺利。

以下是指标转发器的设置方式：

Content before: <ol class="carousel-indicators">
Content after </ol>
Item transformation: <li data-target="#hero-banner" data-slide-to="<%# DataItemIndex%>" class="<%# (DataItemIndex == 0 ? "active" : "" ) %>"></li>

这意味着第一个圆圈始终存在。如何隐藏它并在之前/之后摆脱内容中的<ol>标签？

下一个/上一个箭头再次出现在webpart区域内容之后，其中包含此html：

<a class="left carousel-control" href="#hero-banner" data-slide="prev"><span class="icon-prev"></span></a>
<a class="right carousel-control" href="#hero-banner" data-slide="next"><span class="icon-next"></span></a>
</div>   <!--/#hero-banner-->

使用之前/之后的内容就像在页面上进行硬编码一样，但我不知道如何只有当我们有多个项目时才动态显示它。你能帮忙吗？

Answer 1

你可以使用<%# DataItemCount %> [转换方法]之一[1]

[1]：https://docs.kentico.com/display/K8/Reference+-+Transformation+methods确定有多少项。如果有多个html，则添加html。像

这样的东西

<%# If(DataItemCount > 1,'html for more than one item','html for only one') %>

当然，如果您在显示箭头之前/之后使用信封，您还可以使用jquery来确定其中有多少项目＆amp;根据它隐藏箭头。

$(function(){    
  if($(".carousel-indicators li").length == 1){
       $(".left.carousel-control").hide();
       $(".right.carousel-control").hide();
    }
});

Kentico - Bootstrap轮播隐藏控制器，如果只有一个项目

1 个答案: