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>
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! :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With