ionic 1.2 slidebox

by Tom Brennan

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.1/css/ionic.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.1/js/ionic.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sprintf/1.0.3/sprintf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<ion-view view-title="Slides" ng-app="SlideboxModule" ng-controller="SlideboxController">
  <ion-content style="background-color:lightgrey;">
    <ion-slides options="swiperOptions">
      <ion-slide-page ng-repeat='slide in circularSlides' repeat-done='repeatDone()'>

        <div class="card">
          <div class="item item-avatar stable-bg item-text-wrap">
            <i class="icon ion-icon ion-information-circled positive"></i> {{slide.title}}
          </div>
          <div class="item">
            <div id="slide_{{slide.slideIndex}}"><b>Text</b>: {{slide.data.text}}</div>
          </div>
          <div class="item">
            <div id="slide_{{slide.slideIndex}}"><b>Gibberish</b>: <i>{{slide.data.gibberish}}</i></div>
          </div>
        </div>

      </ion-slide-page>
    </ion-slides>
    <!-- Add Arrows -->
    <!-- div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div //-->
    <div class="custom-swiper-pagination swiper-pagination"></div>

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

CSS

/* Make avatar accept icon as well as image (not relevant to question) */

.item-avatar i:first-child,
.item-avatar .item-img {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 20px;
  max-width: 40px;
  max-height: 40px;
}

.custom-swiper-pagination {
  bottom: 10px;
  left: 0;
  width: 100%;
}

.custom-swiper-pagination .swiper-pagination-bullet {
  margin: 0 5px;
}

JavaScript

var app = angular.module('SlideboxModule', ['ionic']);

app.config(function($logProvider) {
  $logProvider.debugEnabled(true);
});

app.service('SlideBoxService', function() {
  var sliderData = [];
  var currentPageOfSlidersIndex = 0;
  var totalSlidersPerPage = 0;
  var countSlidersPerPage = 5;

  function sliderOffset() {
    return ((currentPageOfSlidersIndex - 1) * countSlidersPerPage);
  }

  var svc = {
    boot: function(pList, pCountSlidersPerPage) {
      var self = this;
      sliderData = pList;
      listLength = sliderData.length;
      countSlidersPerPage = pCountSlidersPerPage;
      currentPageOfSlidersIndex = 0;
      totalSlidersPerPage = Math.ceil(listLength / countSlidersPerPage);
      console.log(sprintf('SlideBoxService: initialise() - currentPageOfSlidersIndex = %d; totalSlidersPerPage = %d; countSlidersPerPage = %d', currentPageOfSlidersIndex, totalSlidersPerPage, countSlidersPerPage));
      return self.pageOfSliders(-1);
    },
    pageOfSliders: function(pageNum) {
      if (pageNum < 1) pageNum = 1;
      if (currentPageOfSlidersIndex > totalSlidersPerPage) pageNum = totalPages;
      currentPageOfSlidersIndex = pageNum;
      var start = sliderOffset();
      var end = start + countSlidersPerPage;
      console.log(sprintf('SlideBoxService: sliderPage() - currentPageOfSlidersIndex = %d; start = %d; end = %d', currentPageOfSlidersIndex, start, end));
      return sliderData.slice(start, end);
    },
    currentPageOfSliders: function() {
      return currentPageOfSlidersIndex;
    },
    nextPageOfSliders: function() {
      var self = this;
      console.log('SlideBoxService: pageNextSliders() - currentPageOfSlidersIndex = ' + (currentPageOfSlidersIndex + 1));
      return self.pageOfSliders(currentPageOfSlidersIndex + 1);
    },
    prevPageOfSliders: function() {
      var self = this;
      console.log(sprintf('SlideBoxService: pagePrevSliders() - currentPageOfSlidersIndex = %d', (currentPageOfSlidersIndex - 1)));
      return...