Angular Custom Multiple Image Carousel Slider

Angular Custom Multiple Image Carousel Slider

Today, We want to share with you Angular Custom Multiple Image Carousel Slider.
In this post we will show you Simple AngularJS Image Carousel Slider Example, hear for Building a Simple Carousel Component with Angular we will give you demo and example for implement.
In this post, we will learn about Responsive Image Carousel with Angular.js with an example.

Easy simple code multiple image carousel slider written in special native AngularJS with javascript and a little CSS/CSS3 magic step by step implemetaion.

A fully image slider is a responsive image (with interval)carousel slideshow which allows all images you to loop through multiple groups of images and change all images using interval.

Image Slider Features in AngularJS:

Image Slider mostly Mobile friendly,and tested on webkit+firefox Browser.

1st: Image slider Responsive design slider for both desktop app and mobile devices application.
2nd: next and prev Dots and arrows change the navigation.
3rd: Different type of Images can be list categorized into all multiple groups an display images.
4th: all images Endless loop cycle type when you reach the last slide in image slider.
5th Last features is Auto-rotation image with support use for pause on hover in carousel image slider.

Carousel with AngularJs : How to use it:

First of all include all script and css file. and then create a index.html file.
copy and paste this code.

[php]

//include css link

//include js link
http://yourprojectdir/angularjs/1.0.8/angular.min.js
http://yourprojectdir/js/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js
http://yourprojectdir/jquery/2.1.3/jquery.min.js
http://yourprojectdir/js/index.js

[/php]

js/index.js

[php]
angular.module(‘slideapp’, [‘ui.bootstrap’]);
function ImageCarouselDemoCtrl($scope){
$scope.slid_myInterval = 3000;
$scope.images_slides = [
{
slide_img: ‘http://infinityknow.com/images/slider/wood.jpg’
},
{
slide_img: ‘http://infinityknow.com/images/slider/food.jpg’
},
{
slide_img: ‘http://infinityknow.com/images/slider/sports.jpg’
},
{
slide_img: ‘http://infinityknow.com/images/slider/people.jpg’
}
];
}
[php]

css/style.css

[php]

#img_slides_control_tag > div{
height: sliderpx;
}
img{
margin:auto;
width: imagespx;
}
#img_slides_control_tag {
position:absolute;
width: imagespx;
left:55%;
top:29px;
margin-left:-sliderpx;
}

[/php]

Alternate way – angular image gallery with thumbnails

[php]

$scope.$watch(‘imgslides’, function(values) {
var i, img = [], slider;

for (i = 0; i < $scope.imgslides.length; i += 2) {
slider = { image1: $scope.imgslides[i] };

if ($scope.imgslides[i + 1]) {
slider.image2 = $scope.imgslides[i + 1];
}

img.push(slider);
}

$scope.img_groupedSlides = img;
}, true);

[/php]