0.0.2 • Published 9 years ago

ng-repeat-owl-carousel v0.0.2

Weekly downloads
13
License
-
Repository
-
Last release
9 years ago

ng-repeat Owl Carousel

Directive for initializing Owl Carousel in AngularJS ng-repeat

#Download ##NPM

npm install ng-repeat-owl-carousel --save

##Bower

bower install ng-repeat-owl-carousel --save

#Usage Add source file to your view

<script src="ngRepeatOwlCarousel.min.js"></script>

Add module as dependency to your app

angular.module('app', ['ocNgRepeat'])

Create Owl Carousel initializer method on controller or page

  app.controller("TeamController", [ function() {
      var ctrl;
      ctrl = this;
      ctrl.members = []

      ctrl.carouselInitializer = function() {
        $(".about-carousel").owlCarousel({
          items: 3,
          navigation: true,
          pagination: false,
          navigationText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
        });
      };
    }
  ]);

Add directive to your view and pass carousel initializer method

<div ng-controller="TeamController as tCtrl">
    <div ng-repeat="mbr in tCtrl.members" ng-repeat-owl-carousel carousel-init="tCtrl.carouselInitializer">
    </div>
</div>