Created
September 8, 2016 13:34
-
-
Save avtaniket/d626d88da42a3ecef0a0e162b9bfaf37 to your computer and use it in GitHub Desktop.
How to integrate Owl carousel with AngularJs (Dynamic content)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| index.html | |
| --------------------------------------------------------------------------------------------------------------------------- | |
| <link href="public/assets/owl_carousel/owl.carousel.css" rel="stylesheet"> | |
| <link href="public/assets/owl_carousel/owl.theme.css" rel="stylesheet"> | |
| <script src="public/assets/owl_carousel/owl.carousel.min.js"></script> | |
| <data-owl-carousel class="owl-carousel" data-options="owlOptionsTestimonials"> | |
| <div owl-carousel-item="" ng-repeat="item in fbAlbumImages" class="item"> | |
| <img ng-src="{{item.source}}" alt="image" width="250"> | |
| </div> | |
| </data-owl-carousel> | |
| app.js | |
| --------------------------------------------------------------------------------------------------------------------------- | |
| app.controller('homeCtrl', ['$scope', 'appServ', 'toastr', '$routeParams', '$location', '$filter', | |
| function($scope, appServ, toastr, $routeParams, $location, $filter) { | |
| $scope.owlOptionsTestimonials = { | |
| autoPlay: 4000, | |
| stopOnHover: true, | |
| slideSpeed: 300, | |
| paginationSpeed: 600, | |
| items: 2 | |
| } | |
| } | |
| ]); | |
| app.directive("owlCarousel", function() { | |
| return { | |
| restrict: 'E', | |
| transclude: false, | |
| link: function(scope) { | |
| scope.initCarousel = function(element) { | |
| console.log('initCarousel'); | |
| // provide any default options you want | |
| var defaultOptions = {}; | |
| var customOptions = scope.$eval($(element).attr('data-options')); | |
| // combine the two options objects | |
| for (var key in customOptions) { | |
| defaultOptions[key] = customOptions[key]; | |
| } | |
| // init carousel | |
| var curOwl = $(element).data('owlCarousel'); | |
| if (!angular.isDefined(curOwl)) { | |
| $(element).owlCarousel(defaultOptions); | |
| } | |
| scope.cnt++; | |
| }; | |
| } | |
| }; | |
| }).directive('owlCarouselItem', [ | |
| function() { | |
| return { | |
| restrict: 'A', | |
| transclude: false, | |
| link: function(scope, element) { | |
| // wait for the last item in the ng-repeat then call init | |
| if (scope.$last) { | |
| console.log('lst element'); | |
| scope.initCarousel(element.parent()); | |
| } | |
| } | |
| }; | |
| } | |
| ]); |
this code not work if page not reload
It works with my code
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello, these seems not to work for me when loading as a template after routing