https://github.com/konsumer/angular-cardflow
An angular ngRepeat-based coverflow for a bunch of cards that uses CSS3 animations efficiently
https://github.com/konsumer/angular-cardflow
Last synced: over 1 year ago
JSON representation
An angular ngRepeat-based coverflow for a bunch of cards that uses CSS3 animations efficiently
- Host: GitHub
- URL: https://github.com/konsumer/angular-cardflow
- Owner: konsumer
- Created: 2014-02-05T21:08:05.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2014-08-18T01:34:58.000Z (almost 12 years ago)
- Last Synced: 2025-02-28T14:52:25.644Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 2.54 MB
- Stars: 16
- Watchers: 2
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular Cardflow
This is for making ng-repeat items that flow into a nice & efficient coverflow. It is inspired by [angular-coverflow](https://github.com/southdesign/angular-coverflow) and [angular-carousel](https://github.com/revolunet/angular-carousel), but differs in a few ways:
* It can handle images, divs, or whatever you like, including ngRepeats. First-level children are the "cards".
* Uses Angular's `$swipe`
* It has multiple interaction modes
* Lots of attribute options with sensible defaults
Here are some more features:
* mobile-friendly, tested on webkit+firefox. Should work ok on IE8+ (untested)
* use CSS 3D transformations directly, no `requestAnimationFrame()` or `setTimeout()`.
* all the look is defined in your own CSS, or use mine, if you want it to look the same.
* data-binding & callbacks
See a [demo](http://konsumer.github.io/angular-cardflow/)
## Usage
See files in `examples` for usage examples, but here's the basics:
1. Include the cardflow.js script provided by this component into your app. (if you are using bower, type `bower install angular-cardflow`, then add `bower_components/angular-cardflow/cardflow.js` to your HTML)
2. Add angular-cardflow as a module dependency to your app.
3. Add CSS to make it look nice. I tried to keep all of the look & animation in CSS only, for maximum configurability. There is a simple example in `examples/cardflow.css`, and see `.cardflow-fancy` stuff in `examples/demo.css` for fancier styles. You may not want to use shadows & gradients on things that move (or things under moving things) for good performance on mobile.
## Attributes
### current
You can force the current card, if you don't want it to be the first one.
### mode
You can set different interaction modes with the `mode` attribute. Here are the available options:
* `none` - no swipe interaction: just use model.current to set cards. You will have to do your own bounds checking
* `swipeSnapKinetic` (default) - swipe left or right, watch velocity & snap to individual card on slow down. sort of like [angular-coverflow](https://github.com/southdesign/angular-coverflow), but snap to cards. For some reason, on firefox, this looks like `swipeSnap`. Need to investigate.
* `swipeSnap` - no kinetic, just snap to new active card
* `swipe` - Like swipeSnap, but no snapping to card
* `swipeSnapOne` - swipe left or right to advance 1. sort of like [angular-carousel](https://github.com/revolunet/angular-carousel).
* `swipeSnapPage` - Like swipeSnapOne, but by the page
## model
`model` is used if you need to reach into the directive with data-binding. It's cool for indicators or buttons that jump to specific cards. It gives you access to these:
* `current` - the read/writable index of the current card. Put a `$watch` on it to do something when current changes