Stop sliding when only having 1 image? #158

Author: jedrzejchalubek

dist/css/glide.theme.css

@@ -21,8 +21,12 @@
   background-color: transparent;
   border: 2px solid rgba(255, 255, 255, 0.5);
   border-radius: 4px;
-  -webkit-transition: border 300ms ease-in-out;
-          transition: border 300ms ease-in-out;
+  opacity: 1;
+  -webkit-transition: opacity 150ms ease, border 300ms ease-in-out;
+          transition: opacity 150ms ease, border 300ms ease-in-out;
+}
+.glide__arrow.disabled {
+  opacity: 0.33;
 }
 .glide__arrow:focus {
   outline: none;
@@ -102,11 +106,3 @@
   border: 2px solid white;
   background-color: rgba(255, 255, 255, 0.5);
 }
-.glide--slider .glide__arrow {
-  opacity: 1;
-  -webkit-transition: opacity 150ms ease;
-          transition: opacity 150ms ease;
-}
-.glide--slider .glide__arrow.disabled {
-  opacity: 0.33;
-}

dist/css/glide.theme.min.css

@@ -28,6 +28,7 @@ var Animation = function(Glide, Core) {
      * Animation constructor.
      */
     function Animation() {
+
     }
 
     /**
@@ -37,6 +38,11 @@ var Animation = function(Glide, Core) {
      * @return {self}
      */
     Animation.prototype.make = function(displacement) {
+        // Do not run if we have only one slide.
+        if (! Core.Run.canProcess()) {
+            return Core.Arrows.disable();
+        }
+
         // Parse displacement to integer before use.
         offset = (typeof displacement !== 'undefined') ? parseInt(displacement) : 0;
 
@@ -226,6 +232,7 @@ var Api = function(Glide, Core) {
      * Api constructor.
      */
     function Api() {
+
     }
 
     /**
@@ -356,6 +363,8 @@ var Api = function(Glide, Core) {
                 Core.Arrows.unbind();
                 Core.Bullets.unbind();
 
+                Glide.destroyed = true;
+
                 delete Glide.slider;
                 delete Glide.track;
                 delete Glide.slides;
@@ -421,14 +430,18 @@ var Arrows = function(Glide, Core) {
 
 
     /**
-     * Disable next/previous arrow.
+     * Disable next/previous arrow and enable another.
      *
      * @param {String} type
      * @return {Void}
      */
     Arrows.prototype.disable = function(type) {
         var classes = Glide.options.classes;
 
+        if (!type) {
+            return this.disableBoth();
+        }
+
         this.items.filter('.' + classes['arrow' + Core.Helper.capitalise(type)])
             .unbind('click.glide touchstart.glide')
             .addClass(classes.disabled)
@@ -439,6 +452,17 @@ var Arrows = function(Glide, Core) {
             .removeClass(classes.disabled);
     };
 
+    /**
+     * Disable both arrows.
+     *
+     * @return {Void}
+     */
+    Arrows.prototype.disableBoth = function() {
+        this.items
+            .unbind('click.glide touchstart.glide')
+            .addClass(Glide.options.classes.disabled);
+    };
+
 
     /**
      * Show both arrows.
@@ -1049,12 +1073,14 @@ var Events = function(Glide, Core) {
     Events.prototype.resize = function() {
 
         $(window).on('resize.glide.' + Glide.uuid, Core.Helper.throttle(function() {
-            Core.Transition.jumping = true;
-            Glide.setup();
-            Core.Build.init();
-            Core.Run.make('=' + Glide.current, false);
-            Core.Run.play();
-            Core.Transition.jumping = false;
+            if(!Glide.destroyed) {
+                Core.Transition.jumping = true;
+                Glide.setup();
+                Core.Build.init();
+                Core.Run.make('=' + Glide.current, false);
+                Core.Run.play();
+                Core.Transition.jumping = false;
+            }
         }, Glide.options.throttle));
 
     };
@@ -1421,6 +1447,10 @@ var Run = function(Glide, Core) {
 
         var that = this;
 
+        if (! this.canProcess()) {
+            return;
+        }
+
         if (Glide.options.autoplay || this.running) {
 
             if (typeof this.interval === 'undefined') {
@@ -1508,6 +1538,11 @@ var Run = function(Glide, Core) {
         // Extract move steps.
         this.steps = (move.substr(1)) ? move.substr(1) : 0;
 
+        // Do not run if we have only one slide.
+        if (! this.canProcess()) {
+            return this.stop();
+        }
+
         // Stop autoplay until hoverpause is not set.
         if (!Glide.options.hoverpause) {
             this.pause();
@@ -1600,6 +1635,24 @@ var Run = function(Glide, Core) {
 
     };
 
+    /**
+     * Stop slider from running.
+     *
+     * @return {void}
+     */
+    Run.prototype.stop = function() {
+        this.pause();
+    };
+
+    /**
+     * Stop slider from running.
+     *
+     * @return {void}
+     */
+    Run.prototype.canProcess = function() {
+        return Glide.slides.length > 1;
+    };
+
     // Return class.
     return new Run();
 
@@ -2043,6 +2096,9 @@ var Glide = function(element, options) {
     this.collect();
     this.setup();
 
+    // Mark the glide as not destroyed
+    this.destroyed = false;
+
     // Call before init callback.
     this.options.beforeInit({
         index: this.current,
@@ -2060,11 +2116,11 @@ var Glide = function(element, options) {
         Helper: Helper,
         Translate: Translate,
         Transition: Transition,
+        Arrows: Arrows,
+        Bullets: Bullets,
         Run: Run,
         Animation: Animation,
         Clones: Clones,
-        Arrows: Arrows,
-        Bullets: Bullets,
         Height: Height,
         Build: Build,
         Events: Events,

dist/glide.js

@@ -118,4 +118,4 @@
 		</script>
 
 	</body>
-</html>
+</html>

dist/glide.min.js

@@ -91,11 +91,11 @@ var Glide = function(element, options) {
         Helper: Helper,
         Translate: Translate,
         Transition: Transition,
+        Arrows: Arrows,
+        Bullets: Bullets,
         Run: Run,
         Animation: Animation,
         Clones: Clones,
-        Arrows: Arrows,
-        Bullets: Bullets,
         Height: Height,
         Build: Build,
         Events: Events,

dist/glide.min.js.map

@@ -38,7 +38,12 @@
 		background-color: transparent;
 		border: 2px solid rgba(255, 255, 255, 0.5);
 		border-radius: 4px;
-		transition: border 300ms ease-in-out;
+		opacity: 1;
+		transition: opacity 150ms ease, border 300ms ease-in-out;
+
+		&.disabled {
+			opacity: 0.33;
+		}
 
 		&:focus { outline: none; }
 		&:hover { border-color: white; }
@@ -110,22 +115,9 @@
 	}
 
 
-	&--slider {
-
-		@{that}__arrow {
-			opacity: 1;
-			transition: opacity 150ms ease;
-
-			&.disabled {
-				opacity: 0.33;
-			}
-		}
-
-	}
-
+	&--slider {}
 
 	&--carousel {}
 
-
 	&--slideshow {}
 }

examples/basic.html

@@ -18,6 +18,7 @@ var Animation = function(Glide, Core) {
      * Animation constructor.
      */
     function Animation() {
+
     }
 
     /**
@@ -27,6 +28,11 @@ var Animation = function(Glide, Core) {
      * @return {self}
      */
     Animation.prototype.make = function(displacement) {
+        // Do not run if we have only one slide.
+        if (! Core.Run.canProcess()) {
+            return Core.Arrows.disable();
+        }
+
         // Parse displacement to integer before use.
         offset = (typeof displacement !== 'undefined') ? parseInt(displacement) : 0;
 

src/Glide.js

@@ -11,6 +11,7 @@ var Api = function(Glide, Core) {
      * Api constructor.
      */
     function Api() {
+
     }
 
     /**