Simple pager for slider, needs styles

dist/css/ionic.css

@@ -3021,6 +3021,8 @@ a.button {
   padding: 10px; }
 
 .slide-box {
+  background-color: #000;
+  position: relative;
   overflow: hidden; }
 
 .slide-box-items {
@@ -3040,6 +3042,21 @@ a.button {
   .slide-box-content img {
     width: 100%; }
 
+.slide-box-pager {
+  position: absolute;
+  bottom: 20px;
+  width: 100%;
+  text-align: center; }
+  .slide-box-pager > * {
+    display: inline-block;
+    text-decoration: none;
+    margin: 0px 5px;
+    color: #fff;
+    opacity: 0.5; }
+    .slide-box-pager > *.active {
+      -webkit-transition: opacity 0.4s ease-in;
+      opacity: 1; }
+
 .slide-in-up {
   opacity: 0;
   -webkit-transform: translate3d(0, 100%, 0);

dist/js/ionic.js

@@ -2278,10 +2278,20 @@ window.ionic = {
     var _this = this;
 
     this.el = opts.el;
+    this.pager = this.el.querySelector('.slide-box-pager');
 
+    // The drag threshold is the pixel delta that will trigger a drag (to 
+    // avoid accidental dragging)
     this.dragThresholdX = opts.dragThresholdX || 10;
+    // The velocity threshold is a velocity of drag that indicates a "swipe". This
+    // number is taken from hammer.js's calculations
     this.velocityXThreshold = opts.velocityXThreshold || 0.3;
 
+    // Initialize the slide index to the first page and update the pager
+    this.slideIndex = 0;
+    this._updatePager();
+
+
     // Listen for drag and release events
     window.ionic.onGesture('drag', function(e) {
       _this._handleDrag(e);
@@ -2324,6 +2334,8 @@ window.ionic = {
 
       // Update the slide index
       this.slideIndex = Math.ceil(offsetX / slideWidth);
+
+      this._updatePager();
     },
 
     /**
@@ -2337,6 +2349,23 @@ window.ionic = {
       return this.slideIndex;
     },
 
+    /**
+     * If we have a pager, update the active page when the current slide
+     * changes.
+     */
+    _updatePager: function() {
+      if(!this.pager) {
+        return;
+      }
+      for(var i = 0, j = this.pager.children.length; i < j; i++) {
+        if(i == this.slideIndex) {
+          this.pager.children[i].classList.add('active');
+        } else {
+          this.pager.children[i].classList.remove('active');
+        }
+      }
+    },
+
     _initDrag: function() {
       this._isDragging = false;
       this._drag = null;

js/views/slideBox.js

@@ -12,10 +12,20 @@
     var _this = this;
 
     this.el = opts.el;
+    this.pager = this.el.querySelector('.slide-box-pager');
 
+    // The drag threshold is the pixel delta that will trigger a drag (to 
+    // avoid accidental dragging)
     this.dragThresholdX = opts.dragThresholdX || 10;
+    // The velocity threshold is a velocity of drag that indicates a "swipe". This
+    // number is taken from hammer.js's calculations
     this.velocityXThreshold = opts.velocityXThreshold || 0.3;
 
+    // Initialize the slide index to the first page and update the pager
+    this.slideIndex = 0;
+    this._updatePager();
+
+
     // Listen for drag and release events
     window.ionic.onGesture('drag', function(e) {
       _this._handleDrag(e);
@@ -58,6 +68,8 @@
 
       // Update the slide index
       this.slideIndex = Math.ceil(offsetX / slideWidth);
+
+      this._updatePager();
     },
 
     /**
@@ -71,6 +83,23 @@
       return this.slideIndex;
     },
 
+    /**
+     * If we have a pager, update the active page when the current slide
+     * changes.
+     */
+    _updatePager: function() {
+      if(!this.pager) {
+        return;
+      }
+      for(var i = 0, j = this.pager.children.length; i < j; i++) {
+        if(i == this.slideIndex) {
+          this.pager.children[i].classList.add('active');
+        } else {
+          this.pager.children[i].classList.remove('active');
+        }
+      }
+    },
+
     _initDrag: function() {
       this._isDragging = false;
       this._drag = null;

scss/ionic/_slideBox.scss

@@ -1,4 +1,6 @@
 .slide-box {
+  background-color: #000;
+  position: relative;
   // Make sure items don't scroll over ever
   overflow: hidden;
 }
@@ -23,3 +25,25 @@
     width: 100%;
   }
 }
+
+.slide-box-pager {
+  position: absolute;
+  bottom: 20px;
+  width: 100%;
+  text-align: center;
+
+  > * {
+    display: inline-block;
+    text-decoration: none;
+    margin: 0px 5px;
+    color: #fff;
+
+    opacity: 0.5;
+
+
+    &.active {
+      -webkit-transition: opacity 0.4s ease-in;
+      opacity: 1;
+    }
+  }
+}

test/slideBox.html

@@ -6,6 +6,11 @@
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <link href="../dist/css/ionic.css" rel="stylesheet">
+    <style>
+      #slide-box {
+        max-height: 400px;
+      }
+    </style>
   </head>
   <body>
 
@@ -29,6 +34,11 @@
                 <img src="http://i677.photobucket.com/albums/vv137/smileytrucker/cow-toy-car-stuck-head-1259518194w.jpg">
               </div>
             </div>
+            <div class="slide-box-pager">
+              <span>1</span>
+              <span>2</span>
+              <span>3</span>
+            </div>
           </div>
         </div>
       </main>
@@ -39,7 +49,9 @@
 
     <script>
       var b = document.getElementById('slide-box');
-      var box = new ionic.views.SlideBox({el: b});
+      var box = new ionic.views.SlideBox({
+        el: b
+      });
     </script>
   </body>
 </html>