From 11531cae08f635d9abda6a80c07561887b504e86 Mon Sep 17 00:00:00 2001
From: wulala0102 <sarahwu8788@gmail.com>
Date: Sun, 23 Feb 2025 18:35:45 +0800
Subject: [PATCH 1/2] fix(transition): Fix Splide initialization failure when
 type is `fade` and direction is `LTR` (closes #1095)

---
 src/js/transitions/Fade/Fade.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/js/transitions/Fade/Fade.ts b/src/js/transitions/Fade/Fade.ts
index 08b0fcb1..42337aec 100644
--- a/src/js/transitions/Fade/Fade.ts
+++ b/src/js/transitions/Fade/Fade.ts
@@ -3,7 +3,7 @@ import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { Components, Options, TransitionComponent } from '../../types';
 import { nextTick, noop } from '../../utils';
-
+import { LTR, TTB, RTL } from '../../constants/directions';
 
 /**
  * The component for the fade transition.
@@ -33,7 +33,17 @@ export function Fade( Splide: Splide, Components: Components, options: Options )
    */
   function init(): void {
     Slides.forEach( Slide => {
-      Slide.style( 'transform', `translateX(-${ 100 * Slide.index }%)` );
+      switch (options.direction) {
+        case LTR:
+          Slide.style( 'transform', `translateX(-${ 100 * Slide.index }%)` );
+          break;
+        case RTL:
+          Slide.style( 'transform', `translateX(${ 100 * Slide.index }%)` );
+          break;
+        case TTB:
+          Slide.style( 'transform', `translateY(-${ 100 * Slide.index }%)` );
+          break;
+      }
     } );
   }
 

From 299c02f3dcc4db40d45f3bbe6dc26a462129e800 Mon Sep 17 00:00:00 2001
From: wulala0102 <sarahwu8788@gmail.com>
Date: Sun, 23 Feb 2025 20:52:20 +0800
Subject: [PATCH 2/2] test: add test case

---
 src/js/components/Slides/test/slide.test.ts | 45 ++++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)

diff --git a/src/js/components/Slides/test/slide.test.ts b/src/js/components/Slides/test/slide.test.ts
index 22abd238..ccdfe57d 100644
--- a/src/js/components/Slides/test/slide.test.ts
+++ b/src/js/components/Slides/test/slide.test.ts
@@ -11,7 +11,7 @@ import { Splide } from '../../../core/Splide/Splide';
 import { fire, init, keydown } from '../../../test';
 import { format } from '../../../utils';
 import { SlideComponent } from '../Slide';
-
+import { LTR, RTL, TTB } from '../../../constants/directions';
 
 describe( 'Slide', () => {
   test( 'can assign the unique ID to the slide element.', () => {
@@ -382,4 +382,47 @@ describe( 'Slide', () => {
     expect( Clone.isWithin( 0, 1 ) ).toBe( true );
     expect( Clone.isWithin( 0, 2 ) ).toBe( true );
   } );
+
+
+  // #1095
+  test( 'shows slides correctly when type is `fade` and direction is `TTB`', () => {
+    const splide = init( { speed: 0, perPage: 2, direction: TTB,  type: 'fade', height: '100px', heightRatio: 0.3 } );
+    const { Slides } = splide.Components;
+
+    const Slide0 = Slides.getAt( 0 );
+    const Slide1 = Slides.getAt( 1 );
+    const Slide2 = Slides.getAt( 2 );
+
+    expect( Slide0.slide.style.transform).toBe('translateY(-0%)');
+    expect( Slide1.slide.style.transform).toBe('translateY(-100%)');
+    expect( Slide2.slide.style.transform).toBe('translateY(-200%)');
+  } );
+
+    // #1095
+    test( 'shows slides correctly when type is `fade` and direction is `RTL`', () => {
+      const splide = init( { speed: 0, perPage: 2, direction: RTL,  type: 'fade', height: '100px', heightRatio: 0.3 } );
+      const { Slides } = splide.Components;
+  
+      const Slide0 = Slides.getAt( 0 );
+      const Slide1 = Slides.getAt( 1 );
+      const Slide2 = Slides.getAt( 2 );
+  
+      expect( Slide0.slide.style.transform).toBe('translateX(0%)');
+      expect( Slide1.slide.style.transform).toBe('translateX(100%)');
+      expect( Slide2.slide.style.transform).toBe('translateX(200%)');
+    } );
+
+    // #1095
+    test( 'shows slides correctly when type is `fade` and direction is `LTR`', () => {
+      const splide = init( { speed: 0, perPage: 2, direction: LTR,  type: 'fade', height: '100px', heightRatio: 0.3 } );
+      const { Slides } = splide.Components;
+  
+      const Slide0 = Slides.getAt( 0 );
+      const Slide1 = Slides.getAt( 1 );
+      const Slide2 = Slides.getAt( 2 );
+  
+      expect( Slide0.slide.style.transform).toBe('translateX(-0%)');
+      expect( Slide1.slide.style.transform).toBe('translateX(-100%)');
+      expect( Slide2.slide.style.transform).toBe('translateX(-200%)');
+    } );
 } );