feat: add RTL (right-to-left) support

[nicped]

Summary

• Fixes Button next and previous not working in RTL #86 — sliders inside dir="rtl" pages were unresponsive because browsers report negative scrollLeft in RTL scroll containers
• All scroll math now applies a ±1 direction factor and uses Math.abs() where needed
• initSlider stamps dir="rtl" on the wrapper element so CSS and JS share the same source of truth via getComputedStyle

Changes

• src/swiffy-slider.js — new _rtl() helper; RTL-aware slide(), slideTo(), handleIndicators()
• src/swiffy-slider-extensions.js — RTL-aware mouse drag direction and boundary checks
• docs/examples/index.html — RTL carousel example; window.swiffyslider bridge for inline scripts
• docs/configuration/index.html — RTL direction toggle; init() scoped to sliderPreview
• package.json / Changelog.md — version bumped to 2.1.0

Test plan

• Add dir="rtl" to a slider wrapper and confirm prev/next navigate correctly
• Confirm loop works in both directions in RTL (last→first, first→last)
• Confirm indicator dots update as slides scroll in RTL
• Confirm mouse drag scrolls in the correct direction in RTL
• Navigate to /examples/ — no swiffyslider is not defined console errors
• Use RTL toggle on /configuration/ page — slider reinitializes correctly

🤖 Generated with Claude Code

[Copilot]

Pull request overview

Adds right-to-left (RTL) support across Swiffy Slider’s core navigation, indicators, and mouse-drag extension to address unresponsive controls inside dir="rtl" layouts (Fixes #86).

Changes:

• Add RTL direction detection and apply direction-aware scroll math in core slider navigation/indicator logic.
• Update mouse-drag extension to account for RTL direction.
• Update docs/configuration/examples and bump version to 2.1.0 (including rebuilt dist/docs assets and changelog entry).

Reviewed changes

Copilot reviewed 8 out of 14 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/swiffy-slider.js	Adds _rtl() helper and adjusts slide(), slideTo(), and indicator math for RTL.
src/swiffy-slider-extensions.js	Updates mouse-drag calculations/bounds for RTL direction.
package.json	Bumps package version to 2.1.0.
docs/examples/index.html	Adds global window.swiffyslider bridge and a new RTL example section.
docs/configuration/index.html	Adds RTL toggle and scopes re-init to the preview container.
docs/assets/js/swiffy-slider.js	Rebuilt docs bundle reflecting RTL changes.
docs/assets/js/swiffy-slider.js.map	Rebuilt source map for docs bundle.
docs/assets/js/swiffy-slider-extensions.js	Rebuilt docs bundle reflecting RTL drag changes.
docs/assets/js/swiffy-slider-extensions.js.map	Rebuilt source map for docs extensions bundle.
dist/js/swiffy-slider.js	Rebuilt distribution bundle reflecting RTL changes.
dist/js/swiffy-slider.js.map	Rebuilt source map for dist bundle.
dist/js/swiffy-slider-extensions.js	Rebuilt distribution bundle reflecting RTL drag changes.
dist/js/swiffy-slider-extensions.js.map	Rebuilt source map for dist extensions bundle.
Changelog.md	Adds v2.1.0 entry documenting RTL support.

Comments suppressed due to low confidence (1)

src/swiffy-slider.js:182

• handleIndicators() uses Math.abs(container.scrollLeft) to compute progress. This produces incorrect percentages in browsers where RTL scrollLeft is non-negative (e.g., starts at scrollableWidth and decreases), causing the active indicator to be wrong. It should use the same normalized RTL scroll position as navigation (logical 0..scrollableWidth) rather than Math.abs().

        const container = this._c(sliderElement);
        const scrollableWidth = container.scrollWidth - container.offsetWidth;
        if (scrollableWidth === 0) return;
        const percentSlide = Math.abs(container.scrollLeft) / scrollableWidth;
        for (const indicatorContainer of sliderElement.querySelectorAll(".slider-indicators")) {
            const indicators = indicatorContainer.children;
            const activeIndex = Math.abs(Math.round((indicators.length - 1) * percentSlide));
            for (const el of indicators) el.classList.remove("active");

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[heyyo-droid]

thanks for including this fix.
I just checked the online configurator.
Direction doesn't work as expected.
When clicking on left arrow, the slider should go to the next slide. now it goes to the last slide.
When clicking on the right arrow, it goes to the next slide, but it should go the last slide.
Also indicators follows this wrong behavior.

[heyyo-droid]

Screencast.From.2026-03-22.10-53-03.mp4

[nicped]

What is next in rtl? If I click left arrow when on slide 2, do I go to slide 1 or 3

[heyyoyo]

you should see slide 3, if you click left arrow when on slide 2

[heyyoyo]

Look the examples in previous RTL issue (second sliders in both pages)
https://heyyo-droid.github.io/swiffy-slider/docs/slider-navigation/
https://heyyo-droid.github.io/swiffy-slider/docs/slider-indicators/

[heyyo-droid]

@nicped Does it make more sense ?
In RTL everything is reversed compared to LTR.

LeftToRight
< PREVIOUS 1,2,3,4,5 NEXT>
ooooo

RightToLeft
<NEXT 5,4,3,2,1 PREVIOUS>
ooooo

Great resource on RTL styling
https://rtlstyling.com/posts/rtl-styling/