Introduction

Angular directive that uses owl carousel by David Deutsch. You can use any options from OwlCarousel2 Docs in this directive.

This directive is only usable for Angular 1.6.*.

Installation

To install this package, run:

bower install angularOwlCarousel --save

then in your angular module add jmp.carousel as dependency:

(function () {
    'use strict';

    angular.module('mgApp', ['jmp.carousel']);
    ...

Usage

You can use this directive like this:

<div owl-carousel="owlOptions" owl-instance="getOwlInstance($owl)">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    ...
</div>

or just this:

<div owl-carousel>
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    ...
</div>

and in your controller:

angular
    .module('myApp')
    .controller('testController', function ($scope) {
        // You can use all options from OwlCarousel2 Documentation
        $scope.owlOptions = {
            items: 5,
            loop: true,
            nav: true
        };
        $scope.getOwlInstance = function (owlInstance) {
            console.log(owlInstance);
        };
    });

License

This project is licensed under the terms of the MIT license.