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
angular.min.js ui-bootstrap-tpls.min.js index.js
index.html
Creating a Slide Show Plugin With AngularJS
<div>
<div id="slides_control">
<div>
<img>
<div class="carousel-caption">
<h4>Your Slide {{$index+1}}</h4>
</div>
</div>
</div>
</div>
index.js
angular.module('liveapp', ['ui.bootstrap']);
function liveCtrl($scope){
$scope.myInterval = 3000;
$scope.slides = [
{
image: 'https://infinityknow.com/400/200/'
},
{
image: 'https://infinityknow.com/400/200/food'
},
{
image: 'https://infinityknow.com/400/200/sports'
},
{
image: 'https://infinityknow.com/400/200/people'
}
];
}
style.css
#slides_control > div{
height: 300px;
}
img{
margin:auto;
width: 500px;
}
#slides_control {
position:absolute;
width: 500px;
left:50%;
top:20px;
margin-left:-200px;
}