Tag Archives: owl

Web

OWL Carousel integration with AngularJS

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

See more about OWL Carousel.