From d8aa11d3aa0d202711582316944e032ce84a2f15 Mon Sep 17 00:00:00 2001
From: geooot <george.thayamkery@gmail.com>
Date: Mon, 20 Jun 2016 12:17:30 -0500
Subject: [PATCH 1/2] Replace 'left' css tag to translate3d for better mobile
 performance

---
 src/responsive-carousel.drag.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/responsive-carousel.drag.js b/src/responsive-carousel.drag.js
index 67500a2..836ead9 100644
--- a/src/responsive-carousel.drag.js
+++ b/src/responsive-carousel.drag.js
@@ -38,7 +38,7 @@
 			if( $( e.target ).attr( "data-transition" ) === "slide" ){
 				var activeSlides = getActiveSlides( $( e.target ), data.deltaX );
 
-				activeSlides[ 0 ].css( "left", data.deltaX + "px" );
+				activeSlides[ 0 ].css( "transform", "translate3d(" + data.deltaX + "px,0px,0px)" );
 				activeSlides[ 1 ].css( "left", data.deltaX < 0 ? data.w + data.deltaX + "px" : -data.w + data.deltaX + "px" );
 			}
 		} )

From 7cbcb0960226b1a9f7f03559bedbd379296fba13 Mon Sep 17 00:00:00 2001
From: geooot <george.thayamkery@gmail.com>
Date: Mon, 20 Jun 2016 14:04:40 -0500
Subject: [PATCH 2/2] added translate3d to make stuff smoother on mobile
 browsers

---
 src/responsive-carousel.drag.js   | 14 +++++++-------
 src/responsive-carousel.slide.css | 32 +++++++++++++++----------------
 test/functional/slide.html        |  4 ----
 3 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/src/responsive-carousel.drag.js b/src/responsive-carousel.drag.js
index 836ead9..031d280 100644
--- a/src/responsive-carousel.drag.js
+++ b/src/responsive-carousel.drag.js
@@ -38,8 +38,8 @@
 			if( $( e.target ).attr( "data-transition" ) === "slide" ){
 				var activeSlides = getActiveSlides( $( e.target ), data.deltaX );
 
-				activeSlides[ 0 ].css( "transform", "translate3d(" + data.deltaX + "px,0px,0px)" );
-				activeSlides[ 1 ].css( "left", data.deltaX < 0 ? data.w + data.deltaX + "px" : -data.w + data.deltaX + "px" );
+				activeSlides[ 0 ].css( "transform", "translate3d(" + (data.deltaX + "px,0px,0px)") );
+				activeSlides[ 1 ].css( "transform", "translate3d(" + (data.deltaX < 0 ? data.w + data.deltaX + "px,0px,0px)" : -data.w + data.deltaX + "px,0px,0px)" ));
 			}
 		} )
 		.bind( pluginName + ".dragend", function( e, data ){
@@ -51,17 +51,17 @@
 
 			if( $( e.target ).attr( "data-transition" ) === "slide" ){
 				$( e.target ).one( navigator.userAgent.indexOf( "AppleWebKit" ) ? "webkitTransitionEnd" : "transitionEnd", function(){
-					activeSlides[ 0 ].add( activeSlides[ 1 ] ).css( "left", "" );
+					activeSlides[ 0 ].add( activeSlides[ 1 ] ).css( "transform", "" );
 					$( e.target ).trigger( "goto." + pluginName, activeSlides[ newSlide ? 1 : 0 ] );
 				});
 
 				if( newSlide ){
-					activeSlides[ 0 ].removeClass( activeClass ).css( "left", data.deltaX > 0 ? data.w  + "px" : -data.w  + "px" );
-					activeSlides[ 1 ].addClass( activeClass ).css( "left", 0 );
+					activeSlides[ 0 ].removeClass( activeClass ).css( "transform", "translate3d(" + (data.deltaX > 0 ? data.w  + "px" : -data.w  + "px,0px,0px)") );
+					activeSlides[ 1 ].addClass( activeClass ).css( "transform", "translate3d(0,0,0)" );
 				}
 				else {
-					activeSlides[ 0 ].css( "left", 0);
-					activeSlides[ 1 ].css( "left", data.deltaX > 0 ? -data.w  + "px" : data.w  + "px" );
+					activeSlides[ 0 ].css( "transform", "translate3d(0,0,0)");
+					activeSlides[ 1 ].css( "transform", "translate3d(" + (data.deltaX > 0 ? -data.w  + "px" : data.w  + "px,0px,0px)") );
 				}
 			}
 			else if( newSlide ){
diff --git a/src/responsive-carousel.slide.css b/src/responsive-carousel.slide.css
index 6ab0614..88124c0 100644
--- a/src/responsive-carousel.slide.css
+++ b/src/responsive-carousel.slide.css
@@ -16,16 +16,16 @@
 }
 .carousel-slide .carousel-item {
 	position: absolute;
-	left: 100%;
+	transform: translate3d(100%, 0px, 0px);
 	top: 0;
 	width: 100%; /* necessary for non-active slides */
 	display: block; /* overrides basic carousel styles */
 	z-index: 1;
-	-webkit-transition: left .2s ease;
-	-moz-transition: left .2s ease;
-	-ms-transition: left .2s ease;
-	-o-transition: left .2s ease;
-	transition: left .2s ease;
+	-webkit-transition: transform .2s ease;
+	-moz-transition: transform .2s ease;
+	-ms-transition: transform .2s ease;
+	-o-transition: transform .2s ease;
+	transition: transform .2s ease;
 }
 .carousel-no-transition .carousel-item {
 	-webkit-transition: none;
@@ -35,27 +35,27 @@
 	transition: none;
 }
 .carousel-slide .carousel-active {
-	left: 0;
+	transform: translate3d(0, 0, 0);
 	position: relative;
 	z-index: 2;
 }
 .carousel-slide .carousel-in {
-	left: 0;
+	transform: translate3d(0, 0, 0);
 }
 .carousel-slide-reverse .carousel-out {
-	left: 100%;
+	transform: translate3d(100%, 0, 0);
 }
 .carousel-slide .carousel-out,
 .carousel-slide-reverse .carousel-in {
-	left: -100%;
+	transform: translate3d(-100%, 0, 0);
 }
 .carousel-slide-reverse .carousel-item {
-	-webkit-transition: left .1s ease;
-	-moz-transition: left .1s ease;
-	-ms-transition: left .1s ease;
-	-o-transition: left .1s ease;
-	transition: left .1s ease;
+	-webkit-transition: transform .1s ease;
+	-moz-transition: transform .1s ease;
+	-ms-transition: transform .1s ease;
+	-o-transition: transform .1s ease;
+	transition: transform .1s ease;
 }
 .carousel-slide-reverse .carousel-active {
-	left: 0;
+	transform: translate3d(0, 0, 0);
 }
\ No newline at end of file
diff --git a/test/functional/slide.html b/test/functional/slide.html
index 2cefc16..d7c54a3 100644
--- a/test/functional/slide.html
+++ b/test/functional/slide.html
@@ -24,10 +24,6 @@
 	    <div>
 	        <img src="../assets/monks.jpg">
 	    </div>
-	    <div>
-	        <img src="../assets/monkey.jpg">
-	    </div>
-		
 	</div>