From 7c33b1e458eeb0a967256dd52749e80294208059 Mon Sep 17 00:00:00 2001
From: Hisham Ali Alshami <ahishamali10@gmail.com>
Date: Sat, 13 Mar 2021 14:09:44 +0300
Subject: [PATCH 1/2] fix: rtl support in transition

---
 src/Agile.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/Agile.vue b/src/Agile.vue
index 844653a..442daf8 100644
--- a/src/Agile.vue
+++ b/src/Agile.vue
@@ -11,7 +11,7 @@
 			<div
 				ref="track"
 				class="agile__track"
-				:style="{transform: `translate(${translateX + marginX}px)`, transition: `transform ${settings.timing} ${transitionDelay}ms`}"
+				:style="{transform: `translate(${directionTranslate}${translateX + marginX}px)`, transition: `transform ${settings.timing} ${transitionDelay}ms`}"
 				@mouseover="handleMouseOver('track')"
 				@mouseout="handleMouseOut('track')"
 			>
@@ -141,6 +141,9 @@
 		},
 
 		computed: {
+			directionTranslate() {
+		        return this.settings.rtl ? '-' : '';
+			},
 			breakpoints: function () {
 				return (!this.initialSettings.responsive) ? [] : this.initialSettings.responsive.map(item => item.breakpoint)
 			},

From b4c35c4d37e16aff65a097b5a250324520b0bfe7 Mon Sep 17 00:00:00 2001
From: Hisham Ali Alshami <ahishamali10@gmail.com>
Date: Sat, 13 Mar 2021 18:23:23 +0300
Subject: [PATCH 2/2] fix: rtl support

instead of adding negative signs to correct the RTL direction of the slider just change the HTML dir and lang attribute and instead of reversing the flex-direction just leave it as it is
---
 src/Agile.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/Agile.vue b/src/Agile.vue
index 442daf8..a31cd2f 100644
--- a/src/Agile.vue
+++ b/src/Agile.vue
@@ -11,7 +11,7 @@
 			<div
 				ref="track"
 				class="agile__track"
-				:style="{transform: `translate(${directionTranslate}${translateX + marginX}px)`, transition: `transform ${settings.timing} ${transitionDelay}ms`}"
+				:style="{transform: `translate(${translateX + marginX}px)`, transition: `transform ${settings.timing} ${transitionDelay}ms`}"
 				@mouseover="handleMouseOver('track')"
 				@mouseout="handleMouseOut('track')"
 			>
@@ -141,9 +141,6 @@
 		},
 
 		computed: {
-			directionTranslate() {
-		        return this.settings.rtl ? '-' : '';
-			},
 			breakpoints: function () {
 				return (!this.initialSettings.responsive) ? [] : this.initialSettings.responsive.map(item => item.breakpoint)
 			},
@@ -339,7 +336,7 @@
 	.agile--rtl .agile__slides,
 	.agile--rtl .agile__actions,
 	.agile--rtl .agile__dots {
-		flex-direction: row-reverse;
+		flex-direction: row;
 	}
 
 	.agile:focus, .agile:active, .agile *:focus, .agile *:active {