2

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

如果有人给我一个关于如何做的例子或方向,我会非常满意。

4

2 回答 2

3

您不能轻易更改标记。这是来自 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.leftCSS .carousel-control.right。如果你需要一个完整的元素替换,你可以做一些 DOM 操作。

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

这是一个这样做的例子:

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

因此,您可以将模板修改为稍有不同。

警告这是特定于实现的。如果他们稍后更改实现,这种方法可能会失效。更喜欢 CSS 操作而不是模板替换。

于 2013-08-29T14:36:58.110 回答
0

我刚刚覆盖了轮播的默认样式

    .glyphicon-chevron-right:before {
        font-family: "FontAwesome";
        content: "\f054";
    }
    .glyphicon-chevron-left:before {
        font-family: "FontAwesome";
        content: "\f053";
    }
于 2017-05-26T13:51:14.323 回答