Skip to content

Instantly share code, notes, and snippets.

@vishalbasnet23
Created November 25, 2016 07:10
Show Gist options
  • Save vishalbasnet23/4dc41f25db0d24b40c6fa0288ba35c1e to your computer and use it in GitHub Desktop.
Save vishalbasnet23/4dc41f25db0d24b40c6fa0288ba35c1e to your computer and use it in GitHub Desktop.
Angular1.x directive for owl carousel.
angular.module('demo')
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'index.html',
controller: 'MainCtrl',
controllerAs: 'main'
)}
.otherwise({
redirectTo: '/'
});
})
.controller( 'MainCtrl', function($scope, $stateParams, Projects) {
$scope.slides = [
{
title: "Welcome to the Docs!",
description: "The <b>Ionic Component Documentation</b> showcases a number of useful components that are included out of the box with Ionic.",
image: "image.jpg",
},
{
title: "What is Ionic?",
description: "<b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.",
image: "image1.jpg",
},
{
title: "What is Ionic Cloud?",
description: "The <b>Ionic Cloud</b> is a cloud platform for managing and scaling Ionic apps with integrated services like push notifications, native builds, user auth, and live updating.",
image: "image2.jpg",
}
];
})
.directive('owlCarousel', [ '$timeout', function($timeout) {
return {
restrict: 'E',
transclude: false,
link: function (scope, element) {
var defaultOptions = {
};
scope.initCarousel = function(element) {
// provide any default options you want
var customOptions = scope.$eval(jQuery(element).attr('data-options'));
// combine the two options objects
for(var key in customOptions) {
defaultOptions[key] = customOptions[key];
}
// init carousel
// jQuery(element).owlCarousel(defaultOptions);
};
// scope.$on('owlCarouselLoaded', function() {
$timeout(function(){
jQuery(element).owlCarousel(defaultOptions)
scope.initCarousel();
}, 0, false);
// });
}
};
}])
.directive('owlCarouselItem', [function() {
return {
restrict: 'A',
transclude: false,
link: function(scope, element) {
// wait for the last item in the ng-repeat then call init
if(scope.$last) {
scope.initCarousel(element.parent());
}
}
};
}])
<data-owl-carousel class="slides owl-carousel"
data-options=" {
loop: true,
items: 3,
nav: true,
dots: true
}
">
<div class="item" owl-carousel-item="" ng-repeat="slide in slides">
<div class="project-thumbs">
<img ng-src="{{slide.image}}" />
</div>
<div class="project-name">
<a ng-href="" ng-bind-html="slide.title"></a>
</div>
</div>
</data-owl-carousel>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment