Basic
1
2
3
4
5
6
7
8
9
10
11
12
Inverted
Add the .owl-carousel-inverted class to an .owl-carousel element to invert nav colors.
1
2
3
4
5
6
7
8
9
10
11
12
Center
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
Auto Width
1
2
3
4
6
7
8
9
10
11
12
13
14
15
Lazy Load
Video
Autoplay
1
2
3
4
5
6
7
8
9
10
11
12
Auto Height
1
2
3
4
5
6
7
8
9
10
11
12
Usage
require(['jquery', 'px-libs/owl.carousel'], function($) {
...
});
Usage
To use owl.carousel plugin, you need to include the next scripts:
<script src="path/to/js/libs/owl.carousel.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-owl.carousel.js"></script>
Then inject the plugin into your angular application:
angular.module('yourApp', ['owl.carousel']);Alternatively, you can include owl.carousel plugin using ocLazyLoad plugin:
$ocLazyLoad.load([
{
name: 'owl.carousel',
files: [
'path/to/js/libs/owl.carousel.js',
'path/to/js/pixeladmin/directives/angular-owl.carousel.js',
],
},
]);
owl-carousel directive
You can use owl-carousel directive where you want.
And when the scope is destroyed the directive will be destroyed.
Methods
You can define methods attribute to get a pointer to owl.carousel instance methods
(see the
plugin's documentation):
<owl-carousel methods="ctrl.$carousel">...</owl-carousel>
function SomeController() {
// Pointer
this.$carousel = null;
// ...
// Then, after the initialization, you can call plugin methods:
this.$carousel.prev([300]));
this.$carousel.next([500]));
this.$carousel.to([5, 300]));
});
Options
owl.carousel's options can be specified as attributes (see the plugin's documentation). All options expect an angular expression instead of a literal string.
<owl-carousel items="4"
loop="true"
responsive="{ 480: { items: 2 }, 600: { items: 4 } }"
nav-element="'nav'">...</owl-carousel>
Events
Event handlers can be bound using attributes (see the plugin's documentation):
<owl-carousel on-changed="ctrl.changed"
on-loaded-lazy="ctrl.loadedLazy"
on-play-video="ctrl.playVideo">...</owl-carousel>
function SomeController() {
this.changed = function(e) { ... }
this.loadedLazy = function(e) { ... }
this.playVideo = function(e) { ... }
});