AngularJS Dynamic Carousel Slider Control – Angular SimpleSlider

AngularJS Dynamic Carousel Slider Control – Angular SimpleSlider

The following example Dynamic shows how display dynamic all the images in bootstrap example carousel using AngularJS:
– 1. Create a method to simple get image path and images, title and summary from simple database using Angulajs.
-2. Call the above new method in AngularJS and set data response to property.
-3. Use simple html elements , and more images elements with the data bindings in the view slide to display carousel.
AngularJS Dynamic Slider Control – Carousel with AngularJs
A really nice simple image new carousel slider step by step in all the AngularJS and a little CSS/CSS3 magic.This Simple AngularJS directive images to provide a simple new images slider element for new your application.

READ :  Angular ng-app directive Example

Include Libs

[php]
angular.min.js
ui-bootstrap-tpls.min.js
index.js
[/php]

index.html

Creating a Slide Show Plugin With AngularJS

[php]

[/php]

index.js

[php]
angular.module(‘liveapp’, [‘ui.bootstrap’]);
function liveCtrl($scope){
$scope.myInterval = 3000;
$scope.slides = [
{
image: ‘http://infinityknow.com/400/200/’
},
{
image: ‘http://infinityknow.com/400/200/food’
},
{
image: ‘http://infinityknow.com/400/200/sports’
},
{
image: ‘http://infinityknow.com/400/200/people’
}
];
}
[/php]

style.css

[php]
#slides_control > div{
height: 300px;
}
img{
margin:auto;
width: 500px;
}
#slides_control {
position:absolute;
width: 500px;
left:50%;
top:20px;
margin-left:-200px;
}
[/php]

Example

Leave a Reply

Your email address will not be published. Required fields are marked *