How I can add slide feature for nested tab bar in ionic?

How I can add slide feature for nested tab bar in ionic framework if we have six tabs so I want just three tabs from six tabs show in on mobile screen and also can slide to left or right to another tab?

My HTML Template

<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>Tabs Example</title>

    <link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script>
  </head>

  <body>

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

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

            <ion-tab title="Home" icon="ion-home" ui-sref="tabs.home">
                <ion-nav-view name="home-tab"></ion-nav-view>
            </ion-tab>

            <ion-tab title="About" icon="ion-ios7-information" ui-sref="tabs.about.page1">
                <ion-nav-view name="about-tab"></ion-nav-view>
            </ion-tab>

        </ion-tabs>

    </script>

    <script id="templates/home.html" type="text/ng-template">

        <ion-view title="Home">
            <ion-content class="padding">
               Please check about tab
            </ion-content>
        </ion-view>

    </script>

    <script id="templates/about.html" type="text/ng-template">

        <ion-view title="About">


          <ui-view name="about-page"></ui-view>

        </ion-view>

    </script>

    <script id="templates/about-page1.html" type="text/ng-template">

        <ion-view title="Page 1">
  <div class="tabs-striped tabs-top tabs-background-light tabs-color-assertive">
      <div class="tabs">
   <a class="tab-item tab-item-active" ui-sref="tabs.about.page1">
     Page 1
      </a>
      <a class="tab-item" ui-sref="tabs.about.page2">
     Page 2
      </a>
       <a class="tab-item" ui-sref="tabs.about.page3">
     Page 3
      </a>  
       <a class="tab-item" ui-sref="tabs.about.page4">
Page 4      </a>
       <a class="tab-item" ui-sref="tabs.about.page5">
     Page 5
      </a>
       <a class="tab-item" ui-sref="tabs.about.page6">
     Page 6
      </a>            
      </div>
   </div>
   <ion-content class="padding has-tabs-top">
     <p> Page 1</p>
   </ion-content>
 </ion-view>

    </script>

    <script id="templates/about-page2.html" type="text/ng-template">

        <ion-view title="Page 2">
  <div class="tabs-striped tabs-top tabs-background-light tabs-color-assertive">
      <div class="tabs">
   <a class="tab-item" ui-sref="tabs.about.page1">
     Page 1
      </a>
      <a class="tab-item tab-item-active" ui-sref="tabs.about.page2">
     Page 2
      </a>
       <a class="tab-item" ui-sref="tabs.about.page3">
     Page 3
      </a>  
       <a class="tab-item" ui-sref="tabs.about.page4">
Page 4      </a>
       <a class="tab-item" ui-sref="tabs.about.page5">
     Page 5
      </a>
       <a class="tab-item" ui-sref="tabs.about.page6">
     Page 6
      </a>            
      </div>
   </div>
   <ion-content class="padding has-tabs-top">
     <p> Page 2</p>
   </ion-content>
 </ion-view>

    </script>

  </body>
</html>

For full source code please check out my problem about nested tab bar on codepen

Note: I just show two nested tabs bar from six nested tabs bar on my example code in codepen.

You can use Ionic directives such as on-swipe, on-swipe-left, and on-swipe-right, to slide navigate between your tabs. Here is a example I made off your code pen. http://codepen.io/anon/pen/bdLwPz

Go to the about tab, then click and swipe left. BAM! Magic! Read more about the gesture events here: http://ionicframework.com/docs/api/directive/onSwipe/

Here is the HTML:

<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>Tabs Example</title>

    <link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script>
  </head>

  <body ng-controller="main">

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

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

            <ion-tab title="Home" icon="ion-home" ui-sref="tabs.home">
                <ion-nav-view name="home-tab"></ion-nav-view>
            </ion-tab>

            <ion-tab title="About" icon="ion-ios7-information" ui-sref="tabs.about.page1">
                <ion-nav-view name="about-tab" ></ion-nav-view>
            </ion-tab>

        </ion-tabs>

    </script>

    <script id="templates/home.html" type="text/ng-template">

        <ion-view title="Home">
            <ion-content class="padding">
               Please check about tab
            </ion-content>
        </ion-view>

    </script>

    <script id="templates/about.html" type="text/ng-template">

        <ion-view title="About">


          <ui-view name="about-page"></ui-view>

        </ion-view>

    </script>

    <script id="templates/about-page1.html" type="text/ng-template">

        <ion-view title="Page 1">
  <div class="tabs-striped tabs-top tabs-background-light tabs-color-assertive">
      <div class="tabs">
   <a class="tab-item tab-item-active" ui-sref="tabs.about.page1">
     Page 1
      </a>
      <a class="tab-item" ui-sref="tabs.about.page2">
     Page 2
      </a>
       <a class="tab-item" ui-sref="tabs.about.page3">
     Page 3
      </a>  
       <a class="tab-item" ui-sref="tabs.about.page4">
Page 4      </a>
       <a class="tab-item" ui-sref="tabs.about.page5">
     Page 5
      </a>
       <a class="tab-item" ui-sref="tabs.about.page6">
     Page 6
      </a>            
      </div>
   </div>
   <ion-content on-swipe-left="onSwipeLeft()" class="padding has-tabs-top">
     <p> Page 1</p>
   </ion-content>
 </ion-view>

    </script>

    <script id="templates/about-page2.html" type="text/ng-template">

        <ion-view title="Page 2">
  <div class="tabs-striped tabs-top tabs-background-light tabs-color-assertive">
      <div class="tabs">
   <a class="tab-item" ui-sref="tabs.about.page1">
     Page 1
      </a>
      <a class="tab-item tab-item-active" ui-sref="tabs.about.page2">
     Page 2
      </a>
       <a class="tab-item" ui-sref="tabs.about.page3">
     Page 3
      </a>  
       <a class="tab-item" ui-sref="tabs.about.page4">
Page 4      </a>
       <a class="tab-item" ui-sref="tabs.about.page5">
     Page 5
      </a>
       <a class="tab-item" ui-sref="tabs.about.page6">
     Page 6
      </a>            
      </div>
   </div>
   <ion-content class="padding has-tabs-top">
     <p> Page 2</p>
   </ion-content>
 </ion-view>

    </script>

  </body>
</html>

and the JS:

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

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

    $stateProvider

    .state('tabs', {
        url: "/tab",
        abstract: true,
        templateUrl: "templates/tabs.html"
    })

    .state('tabs.home', {
        url: "/home",
        views: {
            'home-tab': {
                templateUrl: "templates/home.html",
            }
        }
    })

    .state('tabs.about', {
        url: "/about",
        abstract: true,
        views: {
            'about-tab': {
                templateUrl: "templates/about.html"
            }
        }
    })

    .state('tabs.about.page1', {
        url: "/page1",
        views: {
            'about-page': {
                templateUrl: "templates/about-page1.html"
            }
        }
    })

    .state('tabs.about.page2', {
        url: "/page2",
        views: {
            'about-page': {
                templateUrl: "templates/about-page2.html"
            }
        }
    });

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

})
.controller('main', function($scope, $state){

  $scope.onSwipeLeft = function(){
    $state.go('tabs.about.page2')
  };

})