UI Bootstrap control uib-carousel with custom buttons

Question

I am trying to control the carousel through buttons, rather than the controls above the carousel (I will be hiding the chevron icons).

I inspected the chevron icon and found this in the source:

<a role="button" href="" class="left carousel-control" ng-click="prev()" ng-class="{ disabled: isPrevDisabled() }" ng-show="slides.length > 1">
  <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
  <span class="sr-only">previous</span>
</a>

I tried adding the attributes (except the class) to the button, but it does not work:

<button type="button" class="btn btn-default btn-block" ng-click="prev()" ng-class="{ disabled: isPrevDisabled() }" ng-show="slides.length > 1">Previous</button>

• I am guessing it does not work because the button is not within the uib-carousel, so it does not know what 'prev()' and 'isPrevDisabled()' functions are. Can I reference the function, or create my own to control it?

Plnkr Demo

Another thing that I noticed, but it is off-topic, is if you double-click either the right or left chevron button (let's say the right), it only goes one slide to the right. And then if I click the left chevron, it moves to the right once and then moves to the left (when you click left chevron 2nd time). Any way to resolve this 'issue'? It should either move 2 slides on double-click, or discard the 2nd click and when opposite direction is clicked, perform that action properly.

Answer 1

The better way to do this is to use the template-url attribute and define your own carousel controls that way. I've done just that for my project (although I am stuck on getting the Next button to also fire a custom event in my controller as well).

<div class="col-xs-12 box-shadow" style="height: 50px; padding-top: 11px; background-color: #fff; z-index: 15;">Step {{ autoseq.wizardStep + 1 }} of 5</div>
<uib-carousel template-url="/tpl.html" active="autoseq.wizardStep" no-wrap="true" on-carousel-next="autoseq.onNext()" style="height: 395px;">
  <uib-slide style="height: 395px; margin-top: 5px;" index="0">
    ...slide content..
  </uib-slide>

</uib-carousel>

and my template is defined as such (in the same html file)

<script type="text/ng-template" id="/tpl.html">
<div class="carousel">
 <div class="carousel-inner" ng-transclude></div>
 <div class="carousel-controls">
   <div class="carousel-control" style="display: table-cell; float: left; width: 30%;">
    <a role="button" href class="left chevron-left" ng-click="prev()" ng-class="{ disabled: isPrevDisabled() }" ng-show="slides.length > 1">
      <i class="fa fa-chevron-left"></i>
        <span style="margin-left:5px;">Back</span>
    </a>
   </div>
   <div style="display: table-cell; float: left; width: 40%;">
     <ol class="carousel-indicators" ng-show="slides.length > 1">
      <li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }">
      </li>
     </ol>
   </div>
   <div class="carousel-control" style="display: table-cell; float: left; width: 30%;">
     <a role="button" href class="right chevron-right" ng-click="next()" ng-class="{ disabled: isNextDisabled() }" ng-show="slides.length > 1">
       <span style="margin-right:5px;">Next</span>
       <i class="fa fa-chevron-right"></i>
     </a>
   </div>
 </div>
</div>
</script>

Answer 2

Heres a CSS Solution to manipulate the "arrow buttons" down to the position of your buttons. Took away the background gradient and placed your buttons inside the arrow buttons.

a.right.carousel-control {
  position: absolute !important;
  top: 100%;
  width: 385px;
  right: 16px;
  height: 39px;
  z-index: 2;
}
a.left.carousel-control {
  position: absolute !important;
  top: 100%;
  width: 385px;
  left: 16px;
  height: 39px;
  z-index: 2;
}
.carousel-control.left, .carousel-control.right {
  background-image: none !important;
}
 https://plnkr.co/edit/qlh8UOfa6RFbMa5BKGR2

Answer 3

I ran into same problem, had to create a custom directive.

.directive('carouselControls', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $timeout(function() {
                scope.slidesViewed = [];
                scope.slidesRemaining = [];
                var carouselScope = element.isolateScope();

                scope.goNext = function() {
                    carouselScope.next();
                };
                scope.goPrev = function() {
                    carouselScope.prev();
                };
                scope.setActiveSlide = function(number) {
                    if (number < 0 || number > carouselScope.slides.length - 1) {
                        return;
                    }
                    var direction = (scope.getActiveSlide() > number) ? 'prev' : 'next';
                    carouselScope.select(carouselScope.slides[number], direction);
                }
                scope.getActiveSlide = function() {
                    var activeSlideIndex = carouselScope.slides.map(function(s) {
                        return s.slide.active;
                    }).indexOf(true);
                    console.log(activeSlideIndex);
                    return activeSlideIndex;
                };
            });
        }
    };
}]);

Here is working PLUNKR as well. Directive supports below 4 functions, simple call function using ng-click inside carousel-controls directive.

1. goNext()
2. goPrev()
3. setActiveSlide(slideIndex)
4. getActiveSlide()