Angular Carousel Tutorial

January 17, 2016 Appychip 0 Comments

How to use angular carousel

Installation

To install angular-carousel you can opt different way like bower, npm as shown below in the example

Bower

bower install angular-carousel

npm

npm install angular-carousel

If you are using Jspm than you can install it

jspm install npm:angular-carousel

If you want, you can download it directly from the github repo

Note: One more thing to be keep in mind is angular-carousel require angular-touch. So if you don’t have it, get it installed the same way we did angular-carousel.

Including angular-carousel

After installing angular-carousel, check config.js file (only in case if you are using jspm) which should now have the path to basic required file as shown below.

  map: {
    "angular-carousel": "npm:[email protected]",
     ......
    }

Now, we can import the angular-carousel and angular-touch in our js file where we want to use the carousel. Say, for example, we want to show carousel on the index.html, let’s import these in main.js.

myapp.js

import 'angular-carousel';

import 'angular-touch';

import 'angular-carousel/dist/angular-carousel.css!';

Note: The above method is according to ES6, If you are not using ES6 than required files in normal way as follow

<script src="angular.js"></script>
<script src="angular-touch.js"></script>
<script src="angular-carousel.js"></script>

<link href="angular-carousel.css" rel="stylesheet" type="text/css" />

Inject the dependency `angular-carousel` in the module

myapp.js

angular.module('MyApp', ['angular-carousel']);

Implementing angular-carousel

Since we have included the angular-carousel, we can start implementing it. Implementation is quite easy, just use the following code where ever you want to display the carousel.

<div align="center" ng-init="slides = ['assets/img/1.png','assets/img/2.png','assets/img/3.png']">
  <ul rn-carousel rn-carousel-pause-on-hover="" rn-carousel-buffered="" rn-carousel-deep-watch="" rn-carousel-auto-slide="" rn-carousel-index="carouselIndex" class="image">
    <li ng-repeat="slide in slides"><img src="{{slide}}"/></li>
  </ul>
  <div rn-carousel-indicators ng-if="slides" slides="slides" rn-carousel-index="carouselIndex"></div>

</div>

Here, slides is initialized as an array having the path of images to be displayed in carousel.
In the ul tag the directives rn-carousel-pause-on-hover will pause the slide and rn-carousel-index will bind the index with the carousel indicator in the last div. The li tag is used with directive ng-repeat to display the images.
The last div is used with rn-carousel-indicator which displays the indicator of slides and it is bind with rn-carousel-index to link the image in slide and indicator.

Applying CSS

The carousel might not be visible at this time (as this happened in my case), so you might need to apply some CSS to provide it some properties to make it visible like height width etc. Apply the following CSS to see the carousel with some height and width.

/* angular-carousel */
ul {
  height: 450px;
  width: 245.453px;
}

ul li img{
  height: 100%;
  width: 100%;
}

We are done with the carousel. Hope this was useful and any suggestion or doubts are most welcome in the comments section.