Tag Archives: owl


OWL Carousel integration with AngularJS

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:

    <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>

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'));

3. Place new tag in your page:

<wrap-owlcarousel class="owl-carousel" 
    data-options="{autoPlay: 5000, stopOnHover: true, 
        slideSpeed : 300, paginationSpeed : 400, singleItem : true}">
        <img src="img/1.jpg"/>
        <img src="img/2.jpg"/>

See more about OWL Carousel.