Working on a basic image slider

dist/css/ionic-ios7.css

@@ -311,6 +311,9 @@ a {
   -webkit-user-drag: none;
   -webkit-tap-highlight-color: transparent; }
 
+img {
+  -webkit-user-drag: none; }
+
 a:focus, button:focus {
   outline: 0; }
 

dist/css/ionic-scoped.css

@@ -1055,6 +1055,8 @@
   .ionic a {
     -webkit-user-drag: none;
     -webkit-tap-highlight-color: transparent; }
+  .ionic img {
+    -webkit-user-drag: none; }
   .ionic a:focus, .ionic button:focus {
     outline: 0; }
   .ionic body, .ionic .ionic-body {

dist/css/ionic.css

@@ -1375,6 +1375,9 @@ a {
   -webkit-user-drag: none;
   -webkit-tap-highlight-color: transparent; }
 
+img {
+  -webkit-user-drag: none; }
+
 a:focus, button:focus {
   outline: 0; }
 
@@ -3084,6 +3087,19 @@ a.button {
 .card-footer {
   padding: 10px; }
 
+.slide-box {
+  position: relative;
+  white-space: nowrap;
+  -webkit-transition: -webkit-transform 0 ease-in-out; }
+
+.slide-box-content {
+  display: inline-block;
+  vertical-align: top;
+  width: 100%;
+  height: 100%; }
+  .slide-box-content img {
+    width: 100%; }
+
 .slide-in-up {
   opacity: 0;
   -webkit-transform: translate3d(0, 100%, 0);

dist/js/ionic.js

@@ -2264,6 +2264,125 @@ window.ionic = {
 
 })(ionic);
 ;
+/**
+ * The SlideBox is a swipeable, slidable, slideshowable box. Think of any image gallery
+ * or iOS "dot" pager gallery, or maybe a carousel.
+ *
+ * Each screen fills the full width and height of the viewport, and screens can
+ * be swiped between, or set to automatically transition.
+ */
+(function(ionic) {
+'use strict';
+
+  ionic.views.SlideBox = function(opts) {
+    var _this = this;
+
+    this.el = opts.el;
+
+    this.dragThresholdX = opts.dragThresholdX || 10;
+
+    // Listen for drag and release events
+    window.ionic.onGesture('drag', function(e) {
+      _this._handleDrag(e);
+    }, this.el);
+    window.ionic.onGesture('release', function(e) {
+      _this._handleEndDrag(e);
+    }, this.el);
+  };
+
+  ionic.views.SlideBox.prototype = {
+    _initDrag: function() {
+      this._isDragging = false;
+      this._currentDrag = null;
+    },
+    _startDrag: function(e) {
+      var offsetX, content;
+
+      this._initDrag();
+
+      // Make sure to grab the element we will slide as our target
+      content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'slide-box');
+      if(!content) {
+        return;
+      }
+
+      // Disable transitions during drag
+      content.style.webkitTransitionDuration = '0';
+
+      // Grab the starting X point for the item (for example, so we can tell whether it is open or closed to start)
+      offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
+
+      this._currentDrag = {
+        content: content,
+        startOffsetX: offsetX
+      };
+    },
+
+    _handleEndDrag: function(e) {
+      var _this = this;
+      
+      // We didn't have a drag, so just init and leave
+      if(!this._currentDrag) {
+        this._initDrag();
+        return;
+      }
+
+      // Snap to the correct spot
+
+      var content = this._currentDrag.content;
+
+      // Enable transition duration
+      content.style.webkitTransitionDuration = '0.2s';
+
+      var offsetX = Math.abs(parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0);
+      var slideWidth = content.offsetWidth;
+      var totalWidth = content.offsetWidth * content.children.length;
+
+      // Calculate how far in this slide we've dragged
+      var ratio = (offsetX % slideWidth) / slideWidth;
+
+      var finalOffsetX = Math.min(totalWidth, Math.ceil(offsetX / slideWidth) * slideWidth);
+
+      if(ratio < 0.5) {
+        finalOffsetX = Math.max(0, Math.floor(offsetX / slideWidth) * slideWidth);
+      }
+
+
+      content.style.webkitTransform = 'translate3d(' + -finalOffsetX + 'px, 0, 0)';
+
+      this._initDrag();
+    },
+    /**
+     * Process the drag event to move the item to the left or right.
+     */
+    _handleDrag: function(e) {
+      var _this = this;
+      window.requestAnimationFrame(function() {
+        // We really aren't dragging
+        if(!_this._currentDrag) {
+          _this._startDrag(e);
+        }
+
+        // Check if we should start dragging. Check if we've dragged past the threshold,
+        // or we are starting from the open state.
+        if(!_this._isDragging &&
+            ((Math.abs(e.gesture.deltaX) > _this.dragThresholdX) || (Math.abs(_this._currentDrag.startOffsetX) > 0)))
+        {
+          _this._isDragging = true;
+        }
+
+        if(_this._isDragging) {
+          // Grab the new X point, capping it at zero
+          var newX = Math.min(0, _this._currentDrag.startOffsetX + e.gesture.deltaX);
+
+          _this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
+        }
+      });
+    }
+  };
+
+})(window.ionic);
+;
 (function(ionic) {
 'use strict';
 

js/views/slideBox.js

@@ -0,0 +1,118 @@
+/**
+ * The SlideBox is a swipeable, slidable, slideshowable box. Think of any image gallery
+ * or iOS "dot" pager gallery, or maybe a carousel.
+ *
+ * Each screen fills the full width and height of the viewport, and screens can
+ * be swiped between, or set to automatically transition.
+ */
+(function(ionic) {
+'use strict';
+
+  ionic.views.SlideBox = function(opts) {
+    var _this = this;
+
+    this.el = opts.el;
+
+    this.dragThresholdX = opts.dragThresholdX || 10;
+
+    // Listen for drag and release events
+    window.ionic.onGesture('drag', function(e) {
+      _this._handleDrag(e);
+    }, this.el);
+    window.ionic.onGesture('release', function(e) {
+      _this._handleEndDrag(e);
+    }, this.el);
+  };
+
+  ionic.views.SlideBox.prototype = {
+    _initDrag: function() {
+      this._isDragging = false;
+      this._currentDrag = null;
+    },
+    _startDrag: function(e) {
+      var offsetX, content;
+
+      this._initDrag();
+
+      // Make sure to grab the element we will slide as our target
+      content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'slide-box');
+      if(!content) {
+        return;
+      }
+
+      // Disable transitions during drag
+      content.style.webkitTransitionDuration = '0';
+
+      // Grab the starting X point for the item (for example, so we can tell whether it is open or closed to start)
+      offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
+
+      this._currentDrag = {
+        content: content,
+        startOffsetX: offsetX
+      };
+    },
+
+    _handleEndDrag: function(e) {
+      var _this = this;
+      
+      // We didn't have a drag, so just init and leave
+      if(!this._currentDrag) {
+        this._initDrag();
+        return;
+      }
+
+      // Snap to the correct spot
+
+      var content = this._currentDrag.content;
+
+      // Enable transition duration
+      content.style.webkitTransitionDuration = '0.2s';
+
+      var offsetX = Math.abs(parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0);
+      var slideWidth = content.offsetWidth;
+      var totalWidth = content.offsetWidth * content.children.length;
+
+      // Calculate how far in this slide we've dragged
+      var ratio = (offsetX % slideWidth) / slideWidth;
+
+      var finalOffsetX = Math.min(totalWidth, Math.ceil(offsetX / slideWidth) * slideWidth);
+
+      if(ratio < 0.5) {
+        finalOffsetX = Math.max(0, Math.floor(offsetX / slideWidth) * slideWidth);
+      }
+
+
+      content.style.webkitTransform = 'translate3d(' + -finalOffsetX + 'px, 0, 0)';
+
+      this._initDrag();
+    },
+    /**
+     * Process the drag event to move the item to the left or right.
+     */
+    _handleDrag: function(e) {
+      var _this = this;
+      window.requestAnimationFrame(function() {
+        // We really aren't dragging
+        if(!_this._currentDrag) {
+          _this._startDrag(e);
+        }
+
+        // Check if we should start dragging. Check if we've dragged past the threshold,
+        // or we are starting from the open state.
+        if(!_this._isDragging &&
+            ((Math.abs(e.gesture.deltaX) > _this.dragThresholdX) || (Math.abs(_this._currentDrag.startOffsetX) > 0)))
+        {
+          _this._isDragging = true;
+        }
+
+        if(_this._isDragging) {
+          // Grab the new X point, capping it at zero
+          var newX = Math.min(0, _this._currentDrag.startOffsetX + e.gesture.deltaX);
+
+          _this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
+        }
+      });
+    }
+  };
+
+})(window.ionic);

scss/ionic/_scaffolding.scss

@@ -8,6 +8,9 @@ a {
   -webkit-user-drag: none;
   -webkit-tap-highlight-color: transparent;
 }
+img {
+  -webkit-user-drag: none;
+}
 
 a, button {
   &:focus {

scss/ionic/_slideBox.scss

@@ -0,0 +1,18 @@
+.slide-box {
+  position: relative;
+  white-space: nowrap;
+
+  -webkit-transition: -webkit-transform 0 ease-in-out;
+}
+.slide-box.animate {
+}
+.slide-box-content {
+  display: inline-block;
+  vertical-align: top;
+  width: 100%;
+  height: 100%;
+
+  img {
+    width: 100%;
+  }
+}

scss/ionic/ionic.scss

@@ -40,6 +40,8 @@
   "alerts",
   "card",
 
+  "slideBox",
+
   // Animations
   "animations",
 

test/slideBox.html

@@ -0,0 +1,43 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Slide Box</title>
+
+    <!-- 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">
+  </head>
+  <body>
+
+    <section>
+
+      <header class="bar bar-header bar-dark">
+        <h1 class="title">Various Moos</h1>
+      </header>
+
+      <main class="content-wrapper">
+        <div class="content has-header">
+          <div class="slide-box" id="slide-box">
+            <div class="slide-box-content">
+              <img src="http://1.bp.blogspot.com/-kXS3MLcpTPw/T4rZBW2p8DI/AAAAAAAABqI/tR5aiO4Cj58/s1600/cows2.jpg">
+            </div>
+            <div class="slide-box-content">
+              <img src="http://farm6.staticflickr.com/5226/5663664227_ba5e573930_z.jpg">
+            </div>
+            <div class="slide-box-content">
+              <img src="http://i677.photobucket.com/albums/vv137/smileytrucker/cow-toy-car-stuck-head-1259518194w.jpg">
+            </div>
+          </div>
+        </div>
+      </main>
+
+    </section>
+    
+    <script src="../dist/js/ionic.js"></script>
+
+    <script>
+      var b = document.getElementById('slide-box');
+      var box = new ionic.views.SlideBox({el: b});
+    </script>
+  </body>
+</html>