<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>Title</title>

    <link href="https://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>
  <body ng-controller="AppCtrl">

    <ion-nav-bar class="nav-title-slide-ios7 bar-positive">
      <ion-nav-back-button class="button-icon ion-arrow-left-c">
      </ion-nav-back-button>
    </ion-nav-bar>
             
    <ion-nav-view animation="slide-left-right"></ion-nav-view>


    <script id="tabs.html" type="text/ng-template">
      <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-tabs>
    </script>

    
    <script id="home.html" type="text/ng-template">
      <ion-view title="Home">
        <ion-content class="padding">
          <ion-slide-box show-pager="false" on-slide-changed="slideChanged()">

            <ion-slide>
              <div>
                <h1>slide 1</h1>
                <div class="box1" ></div>
              </div>
            </ion-slide>

            <ion-slide>
              <div>
                <h1>slide 2</h1>
                <div class="list"   id="myScroll">
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item">test</li>
                    <li class="item"><a ng-href="#/tab/item"> CLICK HERE </a></li>
                    <li class="item">test</li>
                </div>
              </div>        
            </ion-slide>

            <ion-slide>
              <div>
                <h1>slide 3</h1>
                <div class="box3"></div>
              </div>
            </ion-slide>
          </ion-slide-box>

        </ion-content>
      </ion-view>
    </script>

    
    
    
    
    
    <script id="item.html" type="text/ng-template">
      <ion-view title="title" class="padding">
        <ion-content>




        </ion-content>
      </ion-view>
    </script>

  </body>
</html>
angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
  .state('tabs', {
    url: "/tab",
    abstract: true,
    templateUrl: "tabs.html"
  })
  .state('tabs.home', {
    url: "/home/:slidenum",
    views: {
      'home-tab': {
        templateUrl: "home.html",
        controller: 'AppCtrl'
      }
    }
  })
  .state('tabs.item', {
    url: "/item",
    views: {
      'home-tab': {
        templateUrl: "item.html"
      }
    }
  });


  $urlRouterProvider.otherwise("/tab/home/1");

})

.controller("AppCtrl", function($scope, $timeout, $ionicSlideBoxDelegate, $ionicScrollDelegate,$stateParams) {
  var delegate = $ionicScrollDelegate.$getByHandle('myScroll');

  if($stateParams.slidenum) {
    $timeout( function() {
      $scope.$broadcast('slideBox.setSlide', $stateParams.slidenum);
    }, 50);
  }

  $scope.dataSlide = {};
  $scope.dataSlide.currSlide = $ionicSlideBoxDelegate.currentIndex();

  $scope.slideChanged = function() {
    delegate.rememberScrollPosition('myScroll');
    $scope.dataSlide.currSlide = $ionicSlideBoxDelegate.currentIndex();

    $timeout( function() {
      $ionicScrollDelegate.resize();
    }, 50);
  };



})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.