Carousel Plugin Bug: Incorrect Behavior in RTL dir

[ZedObaia]

Description

The carousel plugin in the Preline project is not working correctly in RTL (Right-To-Left) mode. While the first slide displays correctly, moving to the next slide results in a blank screen.

Steps to Reproduce

1. Initialize the carousel in RTL mode.
2. Observe the first slide displaying correctly.
3. Move to the next slide.
4. Notice the blank slide.

Expected Result

The carousel should display slides correctly in RTL mode, just as it does in LTR (Left-To-Right) mode.

Actual Result

The first slide shows up correctly, but subsequent slides are blank.

Environment

• Preline Version: @preline/carousel 2.0.2, preline 2.0.3
• Tailwind CSS Version: 3.4.1
• Operating System: Mac OS Sonoma 14.0

Root Cause Analysis

After investigating, I found that the issue lies in how the CSS transform is calculated. The current implementation always assumes that repositioning will be to the left, as indicated by the negative sign in the transform calculation:

this.inner.style.transform = `translate(-${this.currentIndex * this.sliderWidth}px, 0px)`;

Proposed Solution

Add an argument isRTL to the constructor and use it to determine the correct direction (sign) for the transform calculation. For example:

this.inner.style.transform = `translate(${this.isRTL ? '' : '-'}${this.currentIndex * this.sliderWidth}px, 0px)`;

Additional Information Here's my package.json for reference:

  "devDependencies": {
    "@tailwindcss/forms": "^0.5.7",
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.38",
    "postcss-cli": "^11.0.0",
    "tailwindcss": "^3.4.1",
    "tailwindcss-dir": "^4.0.0"
  },
  "dependencies": {
    "@preline/carousel": "^2.0.2",
    "preline": "^2.0.3"
  }