Untitled

<!DOCTYPE html>
<html>

  <head>
    <link data-require="ionic@*" data-semver="1.3.1" rel="stylesheet" href="https://code.ionicframework.com/1.3.1/css/ionic.min.css" />
    <script data-require="ionic@*" data-semver="1.3.1" src="https://code.ionicframework.com/1.3.1/js/ionic.bundle.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.0/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.0/css/swiper.min.css">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.0/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.0/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.0/js/swiper.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.0/js/swiper.jquery.min.js"></script>
  </head>

  <body ng-app="Demo">
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-icon icon ion-chevron-left">
        Back
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </body>

</html>

// Code goes here
var app = angular.module('Demo', ['ionic'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
  });
})
.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

    // setup an abstract state for the tabs directive
    .state('tab', {
      url: "/tab",
      abstract: true,
      templateUrl: "tabs.html"
    })

    .state('tab.demo', {
      url: '/demo',
      views: {
        'swiper-demo': {
          templateUrl: 'swiper-demo.html'
        }
      }
    })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/demo');

});

app.controller('DemoCtrl', function($scope){
  $scope.welcomeMsg = 'Welcome To Swiper Demo';
  
  $scope.goToFirstSlide = function(){
    $scope.swiper.slideTo(0);
  };
  
  $scope.swiperOptions = {
    /* Whatever options */
    effect: 'slide',
    initialSlide: 0,
    /* Initialize a scope variable with the swiper */
    onInit: function(swiper){
    $scope.swiper = swiper;
    // Now you can do whatever you want with the swiper
    
    },
    onSlideChangeEnd: function(swiper){
    console.log('The active index is ' + swiper.activeIndex); 
    }
  };
});

/* Styles go here */

<ion-view title="Demo">
  <ion-content overflow-scroll="true" scroll="true" class="has-header padding">
  <div ng-controller="DemoCtrl">
    <ion-slides slider="swiper" options="swiperOptions" style="height: 180px;">
    <ion-slide-page><h1>SLIDE 1</h1></ion-slide-page>
    <ion-slide-page><h1>SLIDE 2</h1></ion-slide-page>
    <ion-slide-page><h1>SLIDE 3</h1></ion-slide-page>
    </ion-slides>
    <button class="button button-positive" ng-click="goToFirstSlide()">GO TO FIRST SLIDE</button>
  </div>
  </ion-content>
</ion-view>

<ion-tabs class="tabs-icon-top">
  <ion-tab title="Demo" icon="icon ion-heart" href="#/tab/demo">
    <ion-nav-view name="swiper-demo"></ion-nav-view>
  </ion-tab>
</ion-tabs>