drewrygh / ionic-ion-horizontal-scroll-cards

Horizontal scroll cards inspired by the Spotify app.

Ionic Horizontal Scroll Cards

A mobile UI component for horizontal scroll cards. Based loosely off of Spotify's featured playlist slider on iOS and Android.

Examples:

• Ionic Horizontal Scroll Cards
• Ionic Horizontal Scroll Cards on Codepen (note: Chrome/Firefox DevTools must be used to emulate a mobile device when viewing the Codepen example.)

Installation

# via bower:
bower install ionic-ion-horizontal-scroll-cards

# or... to use as the starting point for a new Ionic app:
ionic start myProject http://codepen.io/drewrygh/pen/jEJGLx

Usage

<!-- 1.) Include these and make sure the path is correct: -->
<link href="../path/to/css/hscrollcards.min.css" rel="stylesheet">
<script src="../path/to/js/ionic.hscrollcards.js"></script>

<!-- 2.) Add these directives to your Angular/Ionic view: -->
<hscroller>
    <hcard ng-repeat="item in items" index="{{$index}}" desc="{{item.desc}}" image="{{item.image}}"></hcard>
</hscroller>

Customizing with SASS

// Below are the defaults for variables that can be overridden:
$hscroller-lateral-padding: 10px;
$hscroller-card-height: 160px;
$hscroller-card-width: 120px;
$hscroller-image-height: 120px;
$hscroller-image-width: 120px;
$hscroller-card-animate-time: 0.4s;

ionic-ion-horizontal-scroll-cards's Issues

How to code in Javascript/ typescript?

Hi my app is developed in ionic 3. Kindly advise me on this.

Add in README.md file. About injection of 'ionic.contrib.ui.hscrollcards' in the app module.

I was using this component, i tried few times with the description you mentioned there. But i was unable to see any thing in the page. After injecting your module name in the main module of my application, i got the images sliding in the horizontal direction. Please mention that we have to inject ionic.contrib.ui.hscrollcards in the main module in your README.md file.

Load more

Hi, i would like know how to load more in end scroll, exist some event ?

How to make ng-href or ng-click

How can I add ng-href or ng-click on ionic-ion-horizontal-scroll-cards?

Can't vertical scroll.

I can't vertical scroll on hscroller.

Bug in CSS/SCSS

CSS File: https://github.com/drewrygh/ionic-ion-horizontal-scroll-cards/blob/master/example/www/css/hscrollcards.css#L30

The Bug is in the .scss file

More Info: sass/sass#818

I assume the fix would be

height:  calc(#{$hscroller-card-height} - #{$hscroller-image-height});

This scroll is not working in samsung devices.

This scroll is not working in samsung devices.

Not smooth i try to scroll

in console i find this
Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

can't work with ion-content

I wanted to use this great feature inside ion-content but found it can't scroll horizontally... Seems that it only works with ion-pane. But the problem is if I use ion-pane, the whole page can't scroll vertically which is not my case for a mobile app... Look forward to your workaround....