ionic 1.2 slidebox

by Rene Rubio

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>
  <ion-slides options="options" slider="data.slider">
    <ion-slide-page>1</ion-slide-page>
    <ion-slide-page>2</ion-slide-page>
    <ion-slide-page>3</ion-slide-page>
    <ion-slide-page>4</ion-slide-page>
    <ion-slide-page>5</ion-slide-page>
  </ion-slides>
  </ion-content>
</ion-view>

JavaScript

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

app.controller('SlideboxController', function($scope) {
  $scope.options = {
    direction: 'vertical',
    slidesPerView: '1',
    paginationClickable: true,
    showNavButtons: false
  };

  $scope.data = {};

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