Angular Material Carousel Image Sliders - AngularJS Responsive Carousel • InfinityKnow

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)

E-junkie: Sell digital downloads online

E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!

Also see:

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

READ : VueJs Smart Table with Add Edit Delete Records - Dynamic Table

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