javascript - Y AND X scrolling cards (ionic or angular way) -


i able both vertical , horizontal scrolling cards, this:

enter image description here

scrolling down show fifth row cards. when doing vertical horizontal scrolling awesome if cards snaps place when flipping through..

the .json this:

{"first": ["1a"],  "second": ["2a", "2b"],  "third": ["3a", "3b"],  "fourth": ["4a", "4b", "4c", "4d"], "fifth": ["5a","5b"]} 

can done? pointers (like tutorials, libs or code examples) appreciated.

this solution work you, uses both ion-slides, , ion-scroll directives.

enter image description here

there 1 note take care of;case want set initial page each slider have modify json, , use slider option initialslide

html:

<html ng-app="starter">  <head>   <meta charset="utf-8" />   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />   <title>card scroller</title>   <link href="style.css" rel="stylesheet" />   <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet" />   <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>   <script src="script.js"></script> </head>  <body>    <ion-nav-bar class="bar-positive"></ion-nav-bar>    <ion-nav-view></ion-nav-view>    <script id="home.html" type="text/ng-template">     <ion-view view-title="card scroller">        <ion-content class="padding" id="content">         <ion-scroll zooming="true" direction="y" class="scrolling-content">           <ion-slides class="card" options="{pagination: false, initialslide: 0, disablescroll:false}" slider="classa.slider" ng-repeat="slide in myslides">              <ion-slide-page class="page"  ng-repeat="item in slide">             {{item}}             </ion-slide-page>           </ion-slides>          </ion-scroll>       </ion-content>      </ion-view>   </script>  </body>  </html> 

js:

var nameapp = angular.module('starter', ['ionic']);  nameapp.config(function($stateprovider, $urlrouterprovider) {    $stateprovider     .state('home', {       url: '/',       templateurl: 'home.html',       controller: 'homectrl'     });   $urlrouterprovider.otherwise("/");  });   nameapp.controller('homectrl', function($scope) {    $scope.myslides = {     "first": ["1a"],     "second": ["2a", "2b"],     "third": ["3a", "3b"],     "fourth": ["4a", "4b", "4c", "4d"],     "fifth": ["5a", "5b"]   }  }); 

Comments

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -