AngularJS UI 轮播自定义上一个和下一个按钮

Question

是否可以自定义上一个和下一个按钮 AngularJS UI 轮播？我也想有两个元素的步骤。对我来说，文档不是很清楚。

如果有人给我一个关于如何做的例子或指导，我会非常满意。

Answer 1

您无法轻松更改标记。这是template for the carousel from Github

<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel">
    <ol class="carousel-indicators" ng-show="slides().length > 1">
        <li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)"></li>
    </ol>
    <div class="carousel-inner" ng-transclude></div>
    <a ng-click="prev()" class="carousel-control left" ng-show="slides().length > 1">&lsaquo;</a>
    <a ng-click="next()" class="carousel-control right" ng-show="slides().length > 1">&rsaquo;</a>
</div>

当然，您可以覆盖 .carousel-control.left 的 CSS。和 .carousel-control.right .如果你需要一个完整的元素替换，你可以做一些 DOM 操作。

你也可以试试用 $templateCache玩游戏并完全覆盖模板。 $templateCache中的资源名称是“'模板/轮播/carousel.html'”

这是一个这样做的例子:

app.run(function($templateCache) {
  $templateCache.put("template/carousel/carousel.html", "<div>REPLACED!!!</div>")
});

因此，您可以将模板修改为稍微不同的内容。

警告 这是特定于实现的。如果他们稍后更改实现，则此方法可能会中断。比模板替换更喜欢 CSS 操作。