CODEWITHSUNDEEP
javascriptcssangularjsionic-framework
Norfeldt
Norfeldt

Reputation: 9688

Y AND X scrolling cards (ionic or angular way)

I would very much like to be able to do both vertical and horizontal scrolling with cards, like this:

enter image description here

Scrolling down would show fifth row with some cards. When doing vertical horizontal scrolling it would be awesome if the cards snaps into place when flipping through..

The .json would look like this:

{"first": ["1A"], 
"second": ["2A", "2B"], 
"third": ["3A", "3B"], 
"fourth": ["4A", "4B", "4C", "4D"],
"fifth": ["5A","5B"]}

Can this be done? Any pointers (like tutorials, libs or code examples) would be appreciated.

Upvotes: 3

Views: 452

Answers (1)

ProllyGeek
ProllyGeek

Reputation: 15856

This Solution will work for you, it uses both ion-slides, and ion-scroll directives.

enter image description here

There is only one note to take care of;case you want to set initial page for each slider you will have to modify your JSON, and use the 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"]
  }

});

Upvotes: 1

Related Questions