Carousel - RWD Side Menu Plus Tabs

<!DOCTYPE html>
<html ng-app="myApp">

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
		<title>Ionic Framework Example</title>
		<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
		<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
		<script src="app.js"></script>
		<style>
      .slider { height: 100%; text-align: center } 
      .scroll { height: 100% } 
      .custom-swiper-pagination {
        bottom: 60px;
        left: 0;
        width: 100%;
      }
      .custom-swiper-pagination .swiper-pagination-bullet {
        margin: 0 5px; 
      }
    </style>
	</head>

	<body>

     <ion-side-menus>
      
      <ion-pane ion-side-menu-content>
        <ion-nav-bar class="bar-positive nav-title-slide-ios7">
          <ion-nav-back-button class="button-icon"><span class="icon ion-ios7-arrow-left"></span></ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view></ion-nav-view>
      </ion-pane>

      <ion-side-menu side="right">
        <ion-header-bar class="bar bar-header bar-dark"></ion-header-bar>
        <ion-content has-header="true" scroll="doScroll">
          <ion-list>
            <ion-item href="#/" menu-close>Home</ion-item>
            <ion-item href="#/about" menu-close>About</ion-item>
          </ion-list>
        </ion-content>
      </ion-side-menu>
      
    </ion-side-menus> 
  
	</body>
</html>

angular
.module('myApp', ['ionic'])

.directive('pane', function(){
  return {
    restrict: 'E',
    transclude: true,
    scope: { title:'@' },
    templateUrl: 'pane.html',
    controller: function($scope, $ionicNavBarDelegate, $ionicSideMenuDelegate) {
      // debugger;
      console.log($scope.title);
      $ionicNavBarDelegate.title($scope.title);
      $scope.openMenu = function () {
        console.log('pane');
        $ionicSideMenuDelegate.toggleLeft();
      }
    }
  };
})

.directive('featured', function(){
  return {
    restrict: 'E',
    scope: { title:'@' },
    templateUrl: 'featured.html',
    controller: function($scope) {
      console.log('featured');
    }
  };
})

.directive('slidebox', function(){
  return {
    restrict: 'E',
    scope: { title:'@' },
    templateUrl: 'slidebox.html',
    controller: function($scope, $ionicSlideBoxDelegate) {
      $scope.navSlide = function(index) {
        $ionicSlideBoxDelegate.slide(index, 500);
      }
    }
  };
})

.directive('slides', function(){
  return {
    restrict: 'E',
    scope: { 
      slides: '@'
    },
    templateUrl: 'slides.html',
    controller: function($scope, $ionicSlideBoxDelegate) {
      console.log('slides');
      // debugger;
      $scope.slides = [
        {
          text: 'First Page', 
          background: '#4a87ee', 
          backgroundUrl: 'https://a.tcimg.net/tcdc/194.1-236/images/mobile/slim/hp-slide-tcdct173-c.jpg'
        },
        {
          text: 'Second Page',
          background: '#43cee6', 
          backgroundUrl: 'https://a.tcimg.net/tcdc/194.1-236/images/mobile/slim/hp-slide-tcdct173-c.jpg'
        },
        {
          text: 'Third Page',
          background: '#66cc33', 
          backgroundUrl: 'https://a.tcimg.net/tcdc/194.1-236/images/mobile/slim/hp-slide-tcdct173-c.jpg'
        },
        {
          text: 'Fourth Page',
          background: '#f0b840',
          backgroundUrl: 'https://a.tcimg.net/tcdc/194.1-236/images/mobile/slim/hp-slide-tcdct173-c.jpg'
        }
      ];
      var duration = 2500;
      
      // http://idangero.us/swiper/api/#.V6R4SpMrLOQ
      $scope.options = {
        // initialSlide: 0,
        // direction: 'vertical',
        speed: duration,
        // setWrapperSize: true,
        // virtualTranslate: true,
        // autoHeight: true,
        height: 150,
        loop: true,
        // Autoplay
        autoplay: duration,
        slidesPerView: 'auto',
        // Effects
        effect: 'flip',
        cube: {
          slideShadows: true,
          shadow: true,
          shadowOffset: 20,
          shadowScale: 0.94
        },
        coverflow: {
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows : true
        },
        flip: {
          slideShadows : true,
          limitRotation: true
        },
        onAutoplayStop: function(swiper) {
          debugger;
        },
        // Navigation
        // Pagination
        // paginationHide: false,
        // paginationBulletRender: function(index, className) {
        //   debugger;
        // },
        pagination: '.custom-swiper-pagination',
        paginationClickable: true,
        // Name
      };
      
      $scope.$on("$ionicSlides.sliderInitialized", function(event, data){
        // debugger;
        // data.slider is the instance of Swiper
        $scope.slider = data.slider;
      });
      
      $scope.$on("$ionicSlides.slideChangeStart", function(event, data){
        console.log('Slide change is beginning');
      });
      
      $scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
        // note: the indexes are 0-based
        $scope.activeIndex = data.activeIndex;
        $scope.previousIndex = data.previousIndex;
      });
    }
  };
})

.config(function($ionicConfigProvider) {
  // this fixes the title issue switching between homepage tabs but introduces
  // an issue with the menu toggle on the about page
  // $ionicConfigProvider.views.maxCache(0);  
})

.config(function() {
  if (typeof console._commandLineAPI !== 'undefined') {
    // debugger;
    console.API = console._commandLineAPI;
  } else if (typeof console._inspectorCommandLineAPI !== 'undefined') {
    // debugger;
    console.API = console._inspectorCommandLineAPI;
  } else if (typeof console.clear !== 'undefined') {
    // debugger;
    console.API = console;
  }
  console.API.clear();
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('tabs', {
      url: '/tab',
      controller: 'TabsCtrl',
      templateUrl: 'tabs.html'
    })
    .state('tabs.home', {
      url: '/home',
      views: {
        'home-tab': {
          templateUrl: 'home.html',
          controller: 'HomeTabCtrl',
          controllerAs: 'homeVm'
        }
      }
    })  
    .state('tabs.settings', {
      url: '/settings',
      views: {
        'settings-tab': {
          templateUrl: 'settings.html'
        }
      }
    }) 
    .state('tabs.products', {
      url: '/products',
      views: {
        'products-tab': {
          templateUrl: 'products.html'
        }
      }
    }) 
    .state('tabs.signout', {
      url: '/signout',
      views: {
        'signout-tab': {
          templateUrl: 'signout.html'
        }
      }
    })    
    .state('about', {
      url: '/about',
      controller: 'AboutCtrl',
      templateUrl: 'about.html'
    });

  $urlRouterProvider.otherwise('/tab');
})

.controller('TabsCtrl', function($scope, $ionicNavBarDelegate, $ionicSideMenuDelegate) {
  if ($scope.title) {
    debugger;
    $ionicNavBarDelegate.title($scope.title);
    $ionicNavBarDelegate.title($scope.title + 'Tab');
  }

  $scope.openMenu = function () {
    $ionicSideMenuDelegate.toggleRight();
  }
  
})

.controller('HomeTabCtrl', function($scope, $ionicSideMenuDelegate) {
  // debugger;

})

.controller('AboutCtrl', function($scope, $ionicSideMenuDelegate) {
  console.log("AboutCtrl");
  $scope.openMenu = function () {
    debugger;
    $ionicSideMenuDelegate.toggleRight();
  }
})

.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
  $rootScope.$state = $state;
  $rootScope.$stateParams = $stateParams;
  $rootScope.doScroll = true;
}])

;


 
  <ion-view>
    <ion-tabs class="tabs-icon-top tabs-positive">

      <ion-tab title="Home" icon="ion-home" href="#/tab/home">
        <ion-nav-view name="home-tab"></ion-nav-view>
      </ion-tab>
      
      <ion-tab title="Products" icon="ion-pricetags" href="#/tab/products">
        <ion-nav-view name="products-tab"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Profile" icon="ion-person" ng-click="openMenu()">
        
      </ion-tab>

    </ion-tabs>
  </ion-view>

<pane title="Home">
  <slides></slides>
  <!--<featured></featured>-->
  <!--<slidebox></slidebox>-->
</pane>

<pane title="Settings">Settings</pane>

<pane title="About">We are ...</pane>

<ion-view cache-view="false">
  <ion-nav-buttons side="right">
    <button class="button button-icon button-clear ion-navicon" 
      ng-click="openMenu()"
      title="Pane Hamburger"></button>
  </ion-nav-buttons> 
    
  <ion-nav-title>{{title}}</ion-nav-title>
  <ion-content padding="true" class="has-header" scroll="doScroll">
    <h1 ng-if="showTitle" style="text-align: center;">{{title}} Page</h1>
    <ng-transclude></ng-transclude>
  </ion-content>
</ion-view>

<pane title="Sign Out">
  Are you sure you want to sign out?
</pane>

<pane title="Products">
  <featured></featured>
  <ul>
    <li>Product 1</li>
    <li>Product 2</li>
    <li>Product 3</li>
  </ul>
</pane>

<!-- http://ionicframework.com/docs/components/#bar-inputs -->

<div class="bar bar-header item-input-inset">
  <label class="item-input-wrapper">
    <i class="icon ion-ios-search placeholder-icon"></i>
    <input type="search" placeholder="Search">
  </label>
  <button class="button button-clear">
    Cancel
  </button>
</div>

<div class="list card">

  <div class="item item-avatar">
    <img src="http://ionicframework.com/img/docs/mcfly.jpg">
    <h2>Marty McFly</h2>
    <p>November 05, 1955</p>
  </div>

  <div class="item item-body">
    <img class="full-image" src="http://ionicframework.com/img/docs/delorean.jpg">
    <p>
      This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
      the content is from a card-body consisting of an image and paragraph text. The footer
      consists of tabs, icons aligned left, within the card-footer.
    </p>
    <p>
      <a href="#" class="subdued">1 Like</a>
      <a href="#" class="subdued">5 Comments</a>
    </p>
  </div>

</div>

<!-- <pre>{{ slides | json}}</pre>
<pre>{{ options | json}}</pre>
 -->
<ion-slides options="options" slider="data.slider">
  <ion-slide-page ng-repeat="slide in slides">
    <div 
      style="background-color:{{slide.background}};background-image: url('{{slide.backgroundUrl}}');" 
      class="box">
      <h1>{{slide.text}}</h1>
    </div>
  </ion-slide-page>
</ion-slides>
<div class="custom-swiper-pagination swiper-pagination"></div>

<ion-slide-box on-slide-changed="slideHasChanged($index)">
  <ion-slide>
    <div class="box blue"><h1>BLUE</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box yellow"><h1>YELLOW</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box pink"><h1>PINK</h1></div>
  </ion-slide>
</ion-slide-box>