RTL Support proposal (Issue #156)

[aurovrata]

Proposal for enabling RTL functionality, issue #156

The plugin uses a flexbox to display the slide track. In RTL direction, the flex-direction automatically reverses.

It's therefore a simple matter (I reckon :) of reversing the element scrollLeft directive to ensure the slides display/scroll from right to left.

I have introduced a new option setting,

_.opt.dir = 1 | -1

which by default is 1 and is set to -1 for a rtl element.

Each _.ele.scrollLeft directive is then multiplied with the new setting, i.e.

_.ele.scrollLeft * _.opt.dir 

this ensures that calculations of slider status remained unchanged, while the scrollTo function has its scroll value also multiplied by the new setting to ensure the scrollLeft directive goes in the correct direction,

_.ele.scrollLeft = _.opt.dir * scrollTarget

[NickPiscitelli]

Great idea, I've been wanting to try and get RTL support in. Have you attempted this solution at all? I'd like to try and give it a shot myself soon.

[aurovrata]

Greetings Nick and a Happy new year to you and your loved ones!

Have you attempted this solution at all?

yes, I am using the glider library for my WordPress form plugin and one user complained that slider forms were not working for RTL so I managed to get it to work with the above change in my fork.

However, I have not tested it for other applications of Glider such as carousels.

[NickPiscitelli]

Thank you! A happy new year to you and yours as well!

Glad to hear this solution is working for your use case. Would it be possible to provide a link to the slider form, or the plugin itself? I would love to check it out.

[aurovrata]

Would it be possible to provide a link to the slider form, or the plugin itself? I would love to check it out.

the plugin is the Smart Grid-layout extension for CF7 which is available on the WordPress repo. The Glider js plugin is loaded and used on front-end forms that use the mutli-step silder form design.

I have made a small video screencast showing you the form. Download the 3Mb video file to view it in proper resolution, the google drive visualisation is rather low quality for some reason.

[EDIT] updated the screencast link, it was pointing to the wrong file.

[DeeepDev]

So when this pull request is going to be merged!!!
It's been nearly one and a half year:)

[aurovrata]

Hey @DeeepDev , I think @NickPiscitelli hasn't merged it because my mod has only been tested on normal sliders and not carousels. As such I have feeling it likely doesn't work for all formats of the Glider plugin objects which would explain why it hasn't been merged.

[NickPiscitelli]

Hey, sorry, I don't have as much free time as when I first wrote this plugin so I don't get around to checking on things too often.

I don't recall the reason for not originally merging this PR but I would want to perform additional testing and documentation would need to be updated as well.

@DeeepDev Have you used this patch at all, has the behavior worked as you expected?

[sacr3dc0w]

Thanks for this! We're in the process of localizing our site and have utilized your proposed changes to enable RTL in the carousel on our lead generation pages.

https://sa.creativesafetysupply.com/content/landing/5S-poster/index.html

new Glider(document.querySelector('#guidesRow'), {
    duration: 0.3,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: {
        prev: '.glider-prev',
        next: '.glider-next',
    },
    dir: document.documentElement.getAttribute('dir') === 'rtl' ? -1 : 1,
    responsive: [{
        breakpoint: 1024,
        settings: {
            slidesToShow: 5,
            slidesToScroll: 4,
        },
    }, {
        breakpoint: 768,
        settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
        },
    }, {
        breakpoint: 501,
        settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
        },
    }],
});