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.

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;
}

Example