Fixed slide transitions don't work on mobile #25

Codeinwp · Sep 11, 2014 · 9b40a93 · 9b40a93
1 parent adee909
commit 9b40a93
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 20 deletions.
diff --git a/ideal-image-slider.css b/ideal-image-slider.css
@@ -56,6 +56,12 @@
 .iis-effect-slide.iis-direction-next .iis-previous-slide,
 .iis-effect-slide.iis-direction-previous .iis-next-slide { opacity: 1; }
 
+/* Touch styles */
+.iis-touch-enabled .iis-slide { z-index: 1; }
+.iis-touch-enabled .iis-current-slide { z-index: 2; }
+.iis-touch-enabled.iis-is-touching .iis-previous-slide,
+.iis-touch-enabled.iis-is-touching .iis-next-slide { opacity: 1; }
+
 /* Fade effect */
 .iis-effect-fade .iis-slide {
 	-webkit-transition-property: opacity;
@@ -71,21 +77,3 @@
 .iis-effect-fade .iis-current-slide {
 	opacity: 1;
 }
-
-/* Touch effect */
-.iis-effect-touch .iis-slide {
-	opacity: 0;
-	z-index: 1;
-	-webkit-transition-property: -webkit-transform;
-	   -moz-transition-property: -moz-transform;
-		 -o-transition-property: -o-transform;
-			transition-property: transform;
-	-webkit-transition-timing-function: ease-out;
-	   -moz-transition-timing-function: ease-out;
-		 -o-transition-timing-function: ease-out;
-			transition-timing-function: ease-out;
-}
-.iis-effect-touch .iis-current-slide { z-index: 2; }
-.iis-effect-touch .iis-current-slide,
-.iis-effect-touch.iis-is-touching .iis-previous-slide,
-.iis-effect-touch.iis-is-touching .iis-next-slide { opacity: 1; }
diff --git a/ideal-image-slider.js b/ideal-image-slider.js
@@ -290,6 +290,7 @@ var IdealImageSlider = (function() {
 				previousNav: 'iis-previous-nav',
 				nextNav: 'iis-next-nav',
 				animating: 'iis-is-animating',
+				touchEnabled: 'iis-touch-enabled',
 				touching: 'iis-is-touching',
 				directionPrevious: 'iis-direction-previous',
 				directionNext: 'iis-direction-next'
@@ -412,9 +413,10 @@ var IdealImageSlider = (function() {
 
 			// Touch Navigation
 			if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch){
-				this.settings.effect = 'touch';
+				this.settings.effect = 'slide';
 				previousNav.style.display = 'none';
 				nextNav.style.display = 'none';
+				_addClass(sliderEl, this.settings.classes.touchEnabled);
 
 				sliderEl.addEventListener('touchstart', _touch.start.bind(this), false);
 				sliderEl.addEventListener('touchmove', _touch.move.bind(this), false);