Showing posts with label Carousel Slider. Show all posts
Showing posts with label Carousel Slider. Show all posts

Angularjs Carousel Slider

Angularjs Carousel Slider

Angularjs Carousel Slider Following step by step and example code.
angularjs carousel slider
Carousel Slider


Controller :

App.controller('AngularCarouselController', ["$scope", function($scope) {

$scope.colors = ["#fc0003", "#f70008", "#f2000d", "#ed0012", "#e80017", "#e3001c", "#de0021", "#d90026", "#d4002b", "#cf0030", "#c90036", "#c4003b", "#bf0040", "#ba0045", "#b5004a", "#b0004f", "#ab0054", "#a60059", "#a1005e", "#9c0063", "#960069", "#91006e", "#8c0073", "#870078", "#82007d", "#7d0082", "#780087", "#73008c", "#6e0091", "#690096", "#63009c", "#5e00a1", "#5900a6", "#5400ab", "#4f00b0", "#4a00b5", "#4500ba", "#4000bf", "#3b00c4", "#3600c9", "#3000cf", "#2b00d4", "#2600d9", "#2100de", "#1c00e3", "#1700e8", "#1200ed", "#0d00f2", "#0800f7", "#0300fc"];
function getSlide(target, style) {
var i = target.length;
return {
id: (i + 1),
label: 'slide #' + (i + 1),
img: 'http://lorempixel.com/1200/500/' + style + '/' + ((i + 1) % 10),
color: $scope.colors[ (i * 10) % $scope.colors.length],
odd: (i % 2 === 0)
};
}

function addSlide(target, style) {
target.push(getSlide(target, style));
}

$scope.carouselIndex = 3;
$scope.carouselIndex2 = 0;
$scope.carouselIndex2 = 1;
$scope.carouselIndex3 = 5;


function addSlides(target, style, qty) {
for (var i = 0; i < qty; i++) {
addSlide(target, style);
}
}

// 1st ngRepeat demo
$scope.slides = [];
addSlides($scope.slides, 'sports', 50);

// 2nd ngRepeat demo
$scope.slides2 = [];
addSlides($scope.slides2, 'sports', 10);

// 3rd ngRepeat demo
$scope.slides3 = [];
addSlides($scope.slides3, 'people', 50);

// 4th ngRepeat demo
$scope.slides6 = [];
$scope.carouselIndex6 = 0;
addSlides($scope.slides6, 'sports', 10);
$scope.addSlide = function(at) {
if (at === 'head') {
$scope.slides6.unshift(getSlide($scope.slides6, 'people'));
} else {
$scope.slides6.push(getSlide($scope.slides6, 'people'));
}
};

}]);