Skip to content

Instantly share code, notes, and snippets.

@vishalbasnet23
Last active July 11, 2016 12:34
Show Gist options
  • Save vishalbasnet23/4591d93b25033c88e39b3274aaf32f48 to your computer and use it in GitHub Desktop.
Save vishalbasnet23/4591d93b25033c88e39b3274aaf32f48 to your computer and use it in GitHub Desktop.
3D Carousel Directive For Angular
angular
.module('myApp')
.directive( '3dcarousel', ['$timeout', function($timeout) {
return{
link: function($scope, element, attrs) {
$scope.$on('sliderLoaded', function() {
$timeout(function() {
var actualWidth = angular.element( window ).width()
var documentWidth = actualWidth * 0.464 ;
var documentHeight = documentWidth * 0.7;
element.carousel({
frontWidth: documentWidth,
frontHeight: documentHeight,
carouselWidth: actualWidth,
carouselHeight: documentHeight,
directionNav:true,
description: true,
descriptionContainer: '.description',
});
}, 0, false);
})
}
}
}]);
angular.module('myApp')
.controller('slideCtrl', function ($scope, $timeout) {
$scope.slides = ['imagepath-1', 'image-path-2'];
$scope.setCarouselSlides = function() {
$scope.$broadcast('sliderLoaded');
};
$scope.setCarouselSlides();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment