konsumer / angular-cardflow Goto Github PK
View Code? Open in Web Editor NEWAn angular ngRepeat-based coverflow for a bunch of cards that uses CSS3 animations efficiently
An angular ngRepeat-based coverflow for a bunch of cards that uses CSS3 animations efficiently
Hi! I'm trying to create a dynamic load system to have something like an infinite cards carousel. So, initially i have three cards loaded (0,1 and 2 indexes), and the number 1 (the middle one) is displayed, but then when user swipes to next card (number 2) i need to make an ajax call to load the next one (the third) and unload the first one (index 0).
The same happens (but reverse) when user swipes to previous card (index 0)
Any idea about how can i create this? Does this script support dynamic loading?
NOTE: Right now it works loading the next one, but can't swipe into it⦠may be i need a method to force the card flow refresh (?)
Thanks in advance
Hi there, great directive... nice and smooth. I was wondering if there was an attribute or configuration for infinite looping?
Hi,
First, nice project! Thank you!
I am using bootstrap and its 12 grid system. I have picture of various sizes, and I currently display them inside a size 8 column with 2 columns on each side. I have width:100% on the picture so regardless of the size of the picture or size of the browser/device the picture stretch/shrink nicely and fill/fit the size 8 column.
When user swipe, I move to next picture. I try to use this project to have slide effect but cannot. The container has a huge width to hold all the pictures so it does not wrap. The width 100% on the image will stretch it to very large and got the wrong size. Set width:auto does not work because my picture has various sizes. Set to a specific pixel works but does not work when browser/device width changes.
I also tried to put the column inside cardflow. Did not work because the size 8 column has 66.66% as width and stretches to really big. I tried put the whole row inside cardflow. Also does not work. Basically the row could no longer figure out the browser/device width, or it is overwrite by cardflow.
I looked a little into the code. I see a calculation of cardWidth. Is it possible to have a dynamic cardWidth calculated after bootstrap apply the width to the pictures?
Thank you in advance.
--Gordon
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.