An angular ngRepeat-based coverflow for a bunch of cards that uses CSS3 animations efficiently
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:
$swipe
Here are some more features:
requestAnimationFrame()
or setTimeout()
.See a demo
See files in examples
for usage examples, but here's the basics:
bower install angular-cardflow
, then add bower_components/angular-cardflow/cardflow.js
to your HTML)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.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 like swipeSnap
. 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 pagemodel
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