AngularJS Responsive Carousel
An Amazing Fully Responsive AngularJS 1 Carousel that works with Angular Material and has no jQuery dependency.
Demo : https://embed.plnkr.co/ovBExhpO40yzWPJ47QFE/
Install :
npm
npm install angular-jk-carousel
bower
bower install angular-jk-carousel
Usage :
- Add
jk-carousel.js
to your index file:
- Add
jk-carousel.css
to your index file:
- Add a dependency to the
jkAngularCarousel
module in your application.
angular;
- Add a
jk-carousel
tag to your html, set the data array, the item template url and the carousel max width and height.
NOTE: If a maxWidth and a maxHeight is not set, the component will work, but, it will not be responsive, this feature requires those properties to be properly set ('100%' is not an accepted value, a specific size in pixels needs to be set).
- The data array can be pretty much any collection of any kind of objects that you like
vmarrayData = src: 'image1.png' src: 'image2.png' src: 'image3.png' src: 'image4.png' ;
- A very simple example of an item template looks like this:
- It is possible to set the component to auto slide, if the auto slide time is not set, we use the default of 5 seconds:
TODO :
- Add Fade transition type
License
This module is released under the permissive MIT license. Contributions or suggestions are always welcome :D