Horizontal scroll cards inspired by the Spotify app. Load on a mobile device, or use Chrome/Firefox developer tools to emulate a mobile touch device.
DOCS: http://drewrygh.com/ionic-horizontal-scroll-cards
Created
April 4, 2015 22:22
-
-
Save ramanan12345/a65fc6cd69daa0a0b78e to your computer and use it in GitHub Desktop.
Horizontal Scroll Cards | Ionic Framework
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Ionic Horizontal Scroll Cards</title> | |
| <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/drewrygh-misc/hscrollcards.css" /> | |
| <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> | |
| <script src='https://s3-us-west-2.amazonaws.com/drewrygh-misc/ionic.hscrollcards.js'></script> | |
| </head> | |
| <body ng-app="starter" class="slide-left-right-ios7"> | |
| <ion-pane ng-controller="ExampleCtrl"> | |
| <ion-header-bar class="bar-positive"> | |
| <h1 class="title">Horizontal Scroll Cards Demo</h1> | |
| </ion-header-bar> | |
| <hscroller> | |
| <hcard ng-repeat="item in items" index="{{$index}}" desc="{{item.desc}}" image="{{item.image}}"></hcard> | |
| </hscroller> | |
| </ion-pane> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('starter', ['ionic', 'ionic.contrib.ui.hscrollcards']) | |
| .controller('ExampleCtrl', function($scope) { | |
| $scope.items = []; | |
| for (var i = 0; i <= 5; i++) { | |
| var tmp = [ | |
| {desc: 'The Ramones', image:'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSulfJcjBhxxW2NBBn9KbE3B4BSeh0R7mQ38wUi_zpJlQrMoDWh_qFcMelE_tjtAERUPTc'}, | |
| {desc: 'The Beatles', image:'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTGpH07f9zeucoOs_stZyIFtBncU-Z8TDYmJgoFnlnxYmXjJEaitmxZNDkNvYnCzwWTySM'}, | |
| {desc: 'Pink Floyd', image:'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT-FbU5dD_Wz472srRIvoZAhyGTEytx9HWGusbhYgSc2h0N6AqqRrDwzApmyxZoIlyxDcU'}, | |
| {desc: 'The Rolling Stones', image:'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT6uwPPBnHfAAUcSzxr3iq9ou1CZ4f_Zc2O76i5A4IyoymIVwjOMXwUFTGSrVGcdGT9vQY'}, | |
| {desc: 'The Jimi Hendrix Experience', image:'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRA3jz0uhVypONAKWUve80Q6HASvuvZiohl4Sru5ZihkAsjWiaGjocfxd0aC3H7EeFk5-I'}, | |
| {desc: 'Van Halen', image:'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRIslVN9cJJ6YuV0y7JihAyA63JDhXGhkCVxHIRE-IoaF-rpefjIXO5osA24QvN9iCptC8'} | |
| ]; | |
| $scope.items = $scope.items.concat(tmp); | |
| }; | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body, html { | |
| cursor: url('http://ionicframework.com/img/finger.png'), auto; } | |
| div.hscroller { | |
| position: relative; | |
| top: 50%; | |
| -webkit-transform: translateY(-50%); | |
| -ms-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
hello ,
this code not work under ion-content tag for ios device but working same for Android please help me to implement it