<!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>
			<link href="style.css" rel="stylesheet"/>
	
	</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-menus> 
  
	</body>
</html>
var app = angular.module('myApp', ['ionic']);

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

    $stateProvider
        .state('landing', {
            url: '/landing',
            controller: 'landingCtrl',
            templateUrl: 'landing.html'
        });

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


app.controller('landingCtrl', function($scope, $state, $ionicSlideBoxDelegate) {

    $scope.open = function() {
        $state.go('tabs.home', {});
    };
    $scope.buttons = [{
        name: '1'
    }, {
        name: '2'
    }];

    $scope.slide = function($index) {
        $scope.current = $index;
        $ionicSlideBoxDelegate.slide($index);
    }

});

<ion-view hide-nav-bar="true " class="view-bg-blue">
  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
  </ion-nav-buttons>        
  <ion-content padding="true">
    <h3 class="text-center">Welcome To App</h3>
       <div class="button-bar">
            <a ng-repeat="button in buttons" ng-class="{'active': $index === current}" ng-click="slide($index)" class="button button-stable">{{ button.name }}</a>
        </div>
        <ion-slide-box on-slide-changed="slideHasChanged($index)" slide-interval="1000" does-continue="true">
            <ion-slide>
                <div class="box" style="text-align:center;">
                    First slide
                </div>
            </ion-slide>
            <ion-slide>
                <ion-slide>
                    <div class="box" style="text-align:center;">
                        Second slide
                    </div>
                </ion-slide>
            </ion-slide>
        </ion-slide-box>
  </ion-content>
</ion-view>
.view-bg-blue
{
  background-color: lightblue;
}
.text-center
{
  text-align: center;
}