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

READ :  20+ Absolute Best IPTV Service Providers [Top Reviews 2024]

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]

READ :  Angularjs Add class to Active Element ng-class Menu

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]

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

Leave a Reply

Your email address will not be published. Required fields are marked *