AngularJS UI carousel custom previous and next button

Is it possible to make custom previous and next button AngularJS UI carousel? I also want to have two elements of step. For me, documentation is not very clear.

I would be very great full if someone gave me an example or direction on how to do it.

Solution

You can't change the markup easily. Here is the 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>

You can, of course, override the CSS for .carousel-control.left and .carousel-control.right. If you need a complete element replacement, you can do some DOM manipulation.

You can also try to play games with the $templateCache and override the template completely. The resource name in the $templateCache is "'template/carousel/carousel.html'"

Here is an example of doing that:

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

So, you could modify the template to be something slightly different.

WARNING This is implementation specific. If they change the implementation later, this approach may break. Prefer CSS manipulation over template replacement.