Add the .owl-carousel-inverted
class to an .owl-carousel
element to invert nav colors.
require(['jquery', 'px-libs/owl.carousel'], function($) {
...
});
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.
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]));
});
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>
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) { ... }
});