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和.carousel-control.right的CSS。如果需要更换完整的元素，可以进行一些DOM操作。

您还可以尝试使用$templateCache玩游戏并完全覆盖模板。 $templateCache中的资源名称为“'template / carousel / carousel.html'”

这是一个这样做的例子：

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

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

警告这是特定于实施的。如果他们稍后改变实施，这种方法可能会破裂。喜欢对模板替换进行CSS操作。

Answer 2

我刚刚覆盖了转盘的默认样式

    .glyphicon-chevron-right:before {
        font-family: "FontAwesome";
        content: "\f054";
    }
    .glyphicon-chevron-left:before {
        font-family: "FontAwesome";
        content: "\f053";
    }

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

2 个答案: