肯蒂科 - 引导轮播以隐藏控制器(如果只有一个项目)

Question

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

我为carousel所做的是为这个设置一个新的页面类型，其中每个横幅都是/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，如果有一个以上。比如

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

当然，如果你使用信封的前/后显示箭头，你也可以使用jquery来确定有多少项&以此为基础隐藏箭头。

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