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.
Include Libs
[php]
angular.min.js
ui-bootstrap-tpls.min.js
index.js
[/php]
index.html
Creating a Slide Show Plugin With AngularJS
[php]
Your Slide {{$index+1}}
[/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]