This is for making ng-repeat items that flow into a nice & efficient coverflow. It is inspired by angular-coverflow and 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()
orsetTimeout()
. - 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
See files in examples
for usage examples, but here's the basics:
- Include the cardflow.js script provided by this component into your app. (if you are using bower, type
bower install angular-cardflow
, then addbower_components/angular-cardflow/cardflow.js
to your HTML) - Add angular-cardflow as a module dependency to your app.
- 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 inexamples/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.
You can force the current card, if you don't want it to be the first one.
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 checkingswipeSnapKinetic
(default) - swipe left or right, watch velocity & snap to individual card on slow down. sort of like angular-coverflow, but snap to cards. For some reason, on firefox, this looks likeswipeSnap
. Need to investigate.swipeSnap
- no kinetic, just snap to new active cardswipe
- Like swipeSnap, but no snapping to cardswipeSnapOne
- swipe left or right to advance 1. sort of like angular-carousel.swipeSnapPage
- Like swipeSnapOne, but by the page
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