Angular Material Carousel Image Sliders – AngularJS Responsive Carousel

Angular Material Carousel Image Sliders – AngularJS Responsive Carousel

An Amazing simple Fully Responsive AngularJS 1 with Angular material Carousel that works with latest version Angular Material and has no jQuery simple dependency.AngularJS Responsive Carousel

Building the Image Slider using Angular Material

Step 1a: Starting HTML(index.html)

Step 1b: Starting Include Libs

  
    <a href="http://angular.js">http://angular.js</a>
    <a href="http://angular-animate.min.js">http://angular-animate.min.js</a>
    <a href="http://angular-aria.min.js">http://angular-aria.min.js</a>
    <a href="http://angular-material.min.js">http://angular-material.min.js</a>
    
    
    
    
    <a href="http://jk-carousel.min.js">http://jk-carousel.min.js</a>
    <a href="http://script.js">http://script.js</a>
  

Step 2: Set Up the Body Part

Step 3: Display the Slides Source Code

    
      <h3>AutoSlide Carousel</h3>
      
        
    

Step 4a: Display a Single Slide CSS(style.css)

body {
  padding: 20px;
}

md-card {
  margin: auto;
  left: 0;
  right: 0;
  margin-bottom: 20px;
}

Step 4b: Define a simple Module(script.js)

angular.module('myApp', ['ngMaterial', 'jkAngularCarousel'])

Step 4c: script.js Source code

angular.module('myApp', ['ngMaterial', 'jkAngularCarousel'])

.controller('MyCtrl', function($scope) {
    $scope.dataArray = [
      {
        src: 'live24u01.jpg'
      },
      {
        src: 'live24u02.jpg'
      },
      {
        src: 'live24u03.jpg'
      },
      {
        src: 'live24u04.jpg'
      },
      {
        src: 'live24u05.jpg'
      },
      {
        src: 'live24u06.jpg'
      },
      {
        src: 'live24u07.jpg'
      },
      {
        src: 'live24u08.jpg'
      }
    ];
});

Step 5: Datajson Images

 $scope.dataArray = [
      {
        src: 'live24u01.jpg'
      },
      {
        src: 'live24u02.jpg'
      },
      {
        src: 'live24u03.jpg'
      },
      {
        src: 'live24u04.jpg'
      },
      {
        src: 'live24u05.jpg'
      },
      {
        src: 'live24u06.jpg'
      },
      {
        src: 'live24u07.jpg'
      },
      {
        src: 'live24u08.jpg'
      }
    ];

Example

We are Web Technology Experts and Team who provide you very Important information on Web Development information, Interview Questions and Answers, live project problem solution and their solution and online free tutorials – infinityknow.com”.

Example