angularjs-carousel

KO | EN

gitlite — search

#python #react #go #android #deep-learning #linux #docker #macos #awesome #kubernetes #awesome-list #security #ios #open-source

angularjs-carousel

(★ 62)

An Angular Carousel Directive that allows for deferred loading of the pages

angularjs-carousel 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# A Lazy Loading, DOM-light AngularJS Carousel

## Where can I see a demo?

Without further adieu, go check out our GitHub page for the [AngularJS-Carousel-Demo]. Then come back, and we'll
talk about why it is so awesome.

## Why?

Because everyone loves a carousel! And Twitter Bootstrap's carousel leaves a lot to be desired.

But on a serious note, here's why we ended up creating Yet Another Carousel:

* *Light on DOM* - We ran into a use case where we needed to display 1000's of items in a carousel. And make it
  load fast and be responsive. And whatever was out there wasn't cutting it.
* *Lazy Loading* - As mentioned above, loading 1000 items upfront? Not a good idea. So we needed something that was
  smart about how it loaded items,  and when it did so.
* *Simple to use* - We needed to re use it multiple times, and rewriting it from scratch every time, or needing to
  tweak it slightly every time was not fun. So we made it as reusable as possible.
* *Browser Compatibility* - While normal people use Google Chrome or Firefox, or even IE10 sometimes, we needed to
  support IE9 and **gasp** IE8. So CSS transitions were out!

We ended up creating this directly, which was heavily inspired (and liberally borrows) from
http://cubiq.org/swipeview[Cubiq's SwipeView]. Of course, we modified the guts of the beast, and replaced touch related
 events with click, and what not, but the core philosophy and the trick of using 3 divs for the carousel are all from him.

## Requirements

Not too steep. All you need to get this working are

1. AngularJS (Duh!)
2. JQuery (To support transitions in IE9, and IE8!)
3. The directive code

No extra CSS, all done with jQuery animations!

## Browser Support

Ah, and here we get to the reason behind the jQuery necessity. The Carousel works on

* Firefox
* Chrome
* Safari
* IE8+ (probably 7 as well, but untested)

## Using it

There are two parts to using the Carousel Directive, the HTML and the JS Controller code.

Let us take a look at the HTML first:

```
<div carousel
     carousel-class="photo-carousel"
     on-page-upcoming="loadPage(page, tmplCb)"
     give-carousel-to="onCarouselAvailable(carousel)">
     <div class="myCarouselPage">
       Content goes here
       {{scope.awesomeContent}}
     </div>
</div>
<a href="" ng-click="prev()">Previous</a>
<a href="" ng-click="next()">Next</a>
```

There are five major attributes of note in the HTML

1. *carousel* : This marks the DOM element as a Carousel component. Without it, the rest are useless
2. *on-page-upcoming*: This is the function on the controller that is called whenever the carousel directive
   needs to load a certain page. It is called with the page number (Zero based, so page 1 is 0)
3. *give-carousel-to*: Now this function is called when the carousel is bootstrapped, and gives access to
   the controller to the directive. This is used for writing helpful functions to decide to show and hide
   the next / previous page links, and reset the carousel.
4. *carousel-class*: If you want to specify a class to be added to each page of the carousel.
5. *myCarouselPage*: This is the div that gets replicated for each page of the carousel. So, for every page
   that is there in the carousel, one copy of this div will get created.

Now, let us take a look at the controller code to get this to work:

```
// The following code is in the controller

var carousel;
$scope.loadPage = function(page, tmplCb) {
  var carouselPageScope = $scope.$new();
  // Assign / load all the items you want to carouselPageScope.
  // Do work
  // Ensure that the carousel knows how many total pages there are
  carousel.updatePageCount(totalPages);
  tmplCb(carouselPageScope);
};
$scope.onCarouselAvailable = function(car) {
  carousel = car;
};
$scope.hasNext = function() {
  return carousel ? carousel.hasNext() : false;
};
$scope.hasPrevious = function() {
  return carousel ? carousel.hasPrevious() : false;
};
$scope.next = function() {
  if (carousel) carousel.next();
};
$scope.prev = function() {
  if (carousel) carousel.prev();
};
```

We have quite a bit happening here, but there is really two major functions, and the rest are pretty boiler-plate:

1. *loadPage*: The load page function, as mentioned above takes two arguments. And it has two responsibilities. It needs
   to (ideally) create a new scope, and then fetch the contents for that particular page, and set it on this scope. The
   data on the scope can be set / reassigned at any point, as long as the reference to the scope is maintained. So async
   calls are not a problem!
2. *onCarouselAvailable*: THis gives the controller a handle on the carousel. Nothing more, nothing less.
3. *The pagination functions*: These are used to hide / show the next and previous links, based on the state of the carousel.

## Who are we?

We are Fundoo Solutions, an awesome company based out of India who just love AngularJS. Check out our [website] or our [LinkedIn] page.

## License

The code above is open sourced, and licensed under the MIT License, which is the simplest and easiest to understand, and most open.
Basically, feel free to use this code or modify it as per your needs. The actual license is below:

### The MIT License

> Copyright (C) 2011-2013 Vojta Jína.
>
> Permission is hereby granted, free of charge, to any person
> obtaining a copy of this software and associated documentation files
> (the "Software"), to deal in the Software without restriction,
> including without limitation the rights to use, copy, modify, merge,
> publish, distribute, sublicense, and/or sell copies of the Software,
> and to permit persons to whom the Software is furnished to do so,
> subject to the following conditions:
>
> The above copyright notice and this permission notice shall be
> included in all copies or substantial portions of the Software.
>
> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
> NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
> BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
> ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
> CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
> SOFTWARE.

[AngularJS-Carousel-Demo]: http://fundoo-solutions.github.io/angularjs-carousel/
[website]: http://www.befundoo.com
[LinkedIn]: http://www.linkedin.com/company/fundoo-solutions

angularjs-carousel

angularjs-carousel 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

angularjs-carousel

angularjs-carousel 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README