michael michael - 5 months ago 145
AngularJS Question

angular ui.bootstrap.carousel call next()/prev() from $scope

How do I access the next()/prev() methods of the carousel from the slide? I'm trying to connect to hm-swipe-left/right, but I don't seem to have the right $scope

<carousel interval="1000">
<slide ng-repeat="card in slides" active="card.active">
<div class="card list-unstyled text-center">
<ul class='header list-inline list-unstyled'
hm-swipe-left="swipe('next')"
hm-swipe-right="swipe('prev')">
<li><i class="icon {{card.icon}} fa-3x"></i></li>
<li class="title">{{card.title}}</li>
</ul>
</div>
</slide>
</carousel>

EoD EoD
Answer

I was looking for a solution to this. I'll post what I finally did:

In the controller where you have the carousel (make sure your html carousel has id="myCarousel"):

$scope.showNext = function(){
    var index = ($('#myCarousel .active').index()+1)%(slides.length);
    var modIndex = (((index)%(slides.length))+(slides.length))%(slides.length);
    $scope.slides[modIndex].active=true;
}
$scope.showPrev = function(){
    var index = ($('#myCarousel .active').index()-1)%(slides.length);
    var modIndex = (((index)%(slides.length))+(slides.length))%(slides.length);
    $scope.slides[modIndex].active=true;
}

Then in your HTML page:

<img ng-src="{{slide.image}}" style="margin:auto;" ng-swipe-right="showPrev()" ng-swipe-left="showNext()">

Hope it helps to anyone! It works for bootstrap 3.0.2 (my version)

EDIT: Edited the modulus (since there is a bug in javascript when calculating modulus: Javascript modulo not behaving) Now it works! :)

Comments