Horizontal Feed of Cards

I’m trying to make a feed of cards in my ionic app. This is similar functionality to many apps out in the marketplace. One of the most notable ones is the Kickstarter app. Screenshot of how it looks is attached.

I haven’t been able to find anything in the documentation or published examples that would make this easy to do. The swipe cards examples is more Tinder like … What I’m trying to build would require a horizontal pane that magnetizes to a new card on every swipe.

What is the best way to do this?

The ion-slidebox is what you’re looking for. I’ve been able to implement a similar feature in my app for swiping through bar codes, though mine only uses the top portion of the screen the box is expandable to the full screen.


Don’t be afraid to dig through some of the code pens to get a better understanding of it.

1 Like

Here’s an example using an ionSlideBox with cards in it:

1 Like

Thanks @brandyshea and @nnnnnorthhhhh. The difference between the slide box and what I’m looking for is a bit subtle. The slide box seems to want the user to perform a fairly large swipe in order to change the card.

Short, flicking movements by the user will not be registered as a slide change. Looking through the docs, this doesn’t seem to be a parameter I can change.

Any thoughts?

Take a look at http://drewrygh.com/ionic-horizontal-scroll-cards/

Maybe you could adapt something from that?

Good luck!