-
-
Save vanessasoutoc/41b0c44cdbee5381ea2f to your computer and use it in GitHub Desktop.
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
var app = angular.module('app', []); | |
app.controller("ListagemController", function($scope){ | |
$scope.itens = []; | |
for (var i = 1; i <= 16; i++) { | |
$scope.itens.push({text: i}); | |
}; | |
}) | |
app.directive('owlcarousel',function(){ | |
var linker = function(scope,element,attr){ | |
//carrega o carrosel | |
var loadCarousel = function(){ | |
element.owlCarousel({ | |
items : 10, //10 items above 1000px browser width | |
itemsDesktop : [1000,5], //5 items between 1000px and 901px | |
itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px | |
itemsTablet: [600,2], //2 items between 600 and 0; | |
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option | |
}); | |
} | |
//aplica as ações para o carrosel | |
var loadCarouselActions = function(){ | |
angular.element(".owlcarousel_next").click(function(){ | |
element.trigger('owl.next'); | |
}) | |
angular.element(".owlcarousel_prev").click(function(){ | |
element.trigger('owl.prev'); | |
}) | |
angular.element(".owlcarousel_play").click(function(){ | |
element.trigger('owl.play',1000); | |
}) | |
angular.element(".owlcarousel_stop").click(function(){ | |
element.trigger('owl.stop'); | |
}) | |
} | |
//toda vez que adicionar ou remover um item da lista ele carrega o carrosel novamente | |
scope.$watch("itens", function(value) { | |
loadCarousel(element); | |
}) | |
//inicia o carrosel | |
loadCarouselActions(); | |
} | |
return{ | |
restrict : "A", | |
link: linker | |
} | |
}); |
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
<div id="demo" ng-app="app" ng-controller="ListagemController"> | |
<div class="container"> | |
<div class="row"> | |
<div class="span12"> | |
<div owlcarousel class="owl-carousel"> | |
<div class="item" ng-repeat="item in itens"><h1>{{item.text}}</h1></div> | |
</div> | |
<div class="customNavigation"> | |
<a class="btn owlcarousel_prev">Previous</a> | |
<a owlcarouselaction="next" class="btn owlcarousel_next">Next</a> | |
<a class="btn owlcarousel_play">Autoplay</a> | |
<a class="btn owlcarousel_stop">Stop</a> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script src="../assets/js/jquery-1.9.1.min.js"></script> | |
<script src="../owl-carousel/owl.carousel.js"></script> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> | |
<script src="app.js"></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment