![owl](http://img0.tuicool.com/yeqEby.png)
To up to work owl carousel (or other jQuery plugin) with AngularJS you need to perform some actions.
1. Download and include all plugin files:
<html> <head> <link href="css/style.css" rel="stylesheet"/> <link href="vendor/owl-carousel/owl.carousel.css" rel="stylesheet"/> <link href="vendor/owl-carousel/owl.theme.css" rel="stylesheet"/> <script src="vendor/jquery.min.js"></script> <script src="vendor/owl-carousel/owl.carousel.js"></script> </head> <body> ... </body> </html>
2. Create directive in AngularJS:
app.directive('wrapOwlcarousel', function () {
return {
restrict: 'E',
link: function (scope, element, attrs) {
var options = scope.$eval($(element).attr('data-options'));
$(element).owlCarousel(options);
}
};
});
3. Place new tag in your page:
<wrap-owlcarousel class="owl-carousel" data-options="{autoPlay: 5000, stopOnHover: true, slideSpeed : 300, paginationSpeed : 400, singleItem : true}"> <div> <img src="img/1.jpg"/> </div> <div> <img src="img/2.jpg"/> </div> </wrap-owlcarousel>