ionic 1.2 slidebox

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.1/css/ionic.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.1/js/ionic.bundle.js"></script>
<ion-view view-title="Slides" ng-app="SlideboxModule" ng-controller="SlideboxController">
  <ion-content style="background-color:lightgrey;">
    <ion-slides options="options" slider="data.slider">
      <ion-slide-page>
        <div class="card">
          <div class="item item-avatar stable-bg item-text-wrap">
            <i class="icon ion-icon ion-information-circled positive"></i> Slide 1
          </div>
          <div class="item list">
            <ion-input class="item item-input">
              <textarea placeholder="Further comments (optional)" rows="5" ng-model=""></textarea>
            </ion-input>
          </div>
        </div>
      </ion-slide-page>
      <ion-slide-page>
        <div class="card">
          <div class="item item-avatar stable-bg item-text-wrap">
            <i class="icon ion-icon ion-information-circled positive"></i> Slide 2
          </div>
          <div class="item list">
            <ion-input class="item item-input">
              <textarea placeholder="Further comments (optional)" rows="5" ng-model=""></textarea>
            </ion-input>
          </div>
        </div>
      </ion-slide-page>
      <ion-slide-page>
        <div class="card">
          <div class="item item-avatar stable-bg item-text-wrap">
            <i class="icon ion-icon ion-information-circled positive"></i> Slide 3
          </div>
          <div class="item list">
            <ion-input class="item item-input">
              <textarea placeholder="Further comments (optional)" rows="5" ng-model=""></textarea>
            </ion-input>
          </div>
        </div>
      </ion-slide-page>
      <ion-slide-page>
        <div class="card">
          <div class="item item-avatar stable-bg item-text-wrap">
            <i class="icon ion-icon ion-information-circled...

CSS

/* Make avatar accept icon as well as image */
.item-avatar i:first-child, .item-avatar .item-img {
    position: absolute;
    margin:auto;
    top: 0;
    bottom: 0;
    left:20px;
    max-width: 40px;
    max-height: 40px;
}

JavaScript

var app = angular.module('SlideboxModule', ['ionic']);

app.controller('SlideboxController', function($scope) {
  $scope.options = {
    loop: false,
    paginationHide: false,
    paginationClickable: true,
    direction: 'horizontal',
    spaceBetween: 40,
    speed: 600
  };

  $scope.data = {};

  $scope.$watch('data.slider', function(slider) {
    console.log('My slider object is ', slider);
    // Your custom logic here
  });
});