Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 330
michael Avatar asked Dec 31 '25 20:12

michael


1 Answers

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! :)

like image 145
EoD Avatar answered Jan 05 '26 19:01

EoD



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!