3

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>
michael
  • 4,377
  • 8
  • 47
  • 73
  • have you ever found a solution to this problem? I'm looking for this implementation too – EoD Mar 28 '14 at 19:04
  • I used angular-carousel. It also does "lazy-loading" to cache only a few slides in the DOM tree at a time. – michael Apr 02 '14 at 04:24

4 Answers4

2

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

Community
  • 1
  • 1
EoD
  • 357
  • 1
  • 3
  • 11
2

In my case I was just able to do this

<div  ng-swipe-left="$parent.$parent.prev()" ng-swipe-right="$parent.$parent.next()"  uib-slide ng-repeat="product in vm.productList track by $index" index="$index">

I am not sure if doing $parent.$parent is advised but it worked perfectly for me and I did not have put jquery/html code in my controller.

Keep in mind I was inside a ng-repeat, it could also be $parent.next() outside of the ng-repeat.

Maccurt
  • 12,655
  • 7
  • 32
  • 43
  • Also not sure about `$parent.$parent`, but this definitely worked for me. My markup is similar to that of your post. – jiminikiz Jan 23 '17 at 19:09
0

You can get the scope of directive from DOM element and re-use it

    var element = angular.element('.carousel .left');

    if (element.length > 0 && element.scope && element.scope().prev) {
      element.scope().prev();
    }

   // or
    if (element.length > 0 && element.scope && element.scope().next) {
      element.scope().next();
    }
user5368306
  • 1
-1

Here is a slightly simpler solution:

Javascript Controller

$scope.carouselNext = function() {
  $('#carousel-main').carousel('next');
}
$scope.carouselPrev = function() {
  $('#carousel-main').carousel('prev');
}

HTML View

<div id="carousel-main" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-main" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-main" data-slide-to="1"></li>
    <!-- add indicators for any slides added -->
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

    <div id="slide1" class="item active" ng-swipe-right="carouselPrev()" ng-swipe-left="carouselNext()">
      <!-- img or content here -->
    </div>

    <div id="slide2" class="item" ng-swipe-right="carouselPrev()" ng-swipe-left="carouselNext()">
      <!-- img or content here -->
    </div>

    <!-- add more slides as needed -->

  </div>
</div>
barmitage
  • 122
  • 1
  • 5