Amazing carousel for angular material

Downloads in past


0.5.07 years ago8 years agoMinified + gzip package size for angular-jk-carousel in KB


AngularJS Responsive Carousel
An Amazing Fully Responsive AngularJS 1 Carousel that works with Angular Material and has no jQuery dependency.
Demo :

Install :


npm install angular-jk-carousel


bower install angular-jk-carousel

Usage :

- Add jk-carousel.js to your index file:
<script src="angular.js"></script>
<script src="jk-carousel.js"></script>

- Add jk-carousel.css to your index file:
<link href="jk-carousel.css" rel="stylesheet" type="text/css" />

- Add a dependency to the jkAngularCarousel module in your application.
angular.module('MyApp', ['jkAngularCarousel']);

- Add a jk-carousel tag to your html, set the data array, the item template url and the carousel max width and height.
<jk-carousel data="ctrl.arrayData" item-template-url="'item-template.html'" max-width="700" max-height="400" >

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
vm.arrayData = [
  { src: 'image1.png' },
  { src: 'image2.png' },
  { src: 'image3.png' },
  { src: 'image4.png' }
- A very simple example of an item template looks like this:
  <img ng-src="{{slideItem.src}}" >
- 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: ```html ```


- Add Fade transition type


This module is released under the permissive MIT license. Contributions or suggestions are always welcome :D