Geek Answers Handbook

UI Bootstrap control uib-carousel with custom buttons

I am trying to control the carousel through buttons, not the controls above the carousel (I will hide the chevron badges).

I inspected the chevron badge 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 attributes to the button (except for the class), but this did 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 assume this does not work because the button is not within the uib-carousel, so it does not know what the 'prev ()' and 'isPrevDisabled ()' functions are. Can I reference this function or create my own controls?

Demo Plnkr

Another thing that I noticed, but it is off topic, is if you double-click the right or left chevron button (let them say right), it goes only one slide to the right. And then, if I click on the left chevron, it will move to the right once, and then it will move to the left (when you press the left chevron 2 times). Any way to solve this problem? It must either move 2 slides, double-click, or cancel the second click, and when clicking the opposite direction, perform this action correctly.

+6
source share
3 answers

The best way to do this is to use the template-url attribute and define your own carousel controls. I did this only for my project (although I was stuck in clicking the "Next" button to also trigger a custom event in my controller).

 <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>
+2
source

Here is a CSS solution to control the arrow keys to the position of your buttons. Removed the background gradient and placed your buttons in 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
+1
source

I ran into the 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; }; }); } }; }]);

This is where PLUNKR works. The directive supports less than 4 functions, a simple call function using ng-click inside carousel-controls .

  • goNext()
  • goPrev()
  • setActiveSlide(slideIndex)
  • getActiveSlide()
0
source

More articles:


All Articles