Kentico

Question

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

我为轮播所做的是为此设置一个新的页面类型，其中每个横幅都是 /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>

这意味着第一个圆圈总是在那里。如何隐藏它并去掉内容 before/after?

中的 <ol> 标签

next/previous 箭头再次出现在 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-->

使用内容before/after就像硬编码到页面上，但我不知道如何让它动态自动显示，只有当我们有多个项目时。你能帮忙吗？

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();
    }
});

Kentico - Bootstrap 旋转木马在只有一项时隐藏控制器

Kentico - Bootstrap carousel to hide controller if there's only one item