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)
[php]
[/php]
Step 1b: Starting Include Libs
[php]
http://angular.js
http://angular-animate.min.js
http://angular-aria.min.js
http://angular-material.min.js
http://jk-carousel.min.js
http://script.js
[/php]
Step 2: Set Up the Body Part
[php]
[/php]
Step 3: Display the Slides Source Code
[php]
AutoSlide Carousel
[/php]
Step 4a: Display a Single Slide CSS(style.css)
[php]
body {
padding: 20px;
}
md-card {
margin: auto;
left: 0;
right: 0;
margin-bottom: 20px;
}
[/php]
Step 4b: Define a simple Module(script.js)
[php]
angular.module(‘myApp’, [‘ngMaterial’, ‘jkAngularCarousel’])
[/php]
Step 4c: script.js Source code
[php]
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’
}
];
});
[/php]
Step 5: Datajson Images
[php]
$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’
}
];
[/php]
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”.
