Vue-carousel: Right-to-Left for scrolling

[zymawy]

Bug Report

Current Behavior
My Site Using RTL Languages And RTLSet To HTML Tag
The Carousel Does Not Respect RTL Scrolling.
I Try And Set
:rtl="true"
And
autoplayDirection="backward"
Nor Working For Me.
package v: "vue-carousel": "^0.16.0"
I Checked All The Issue Related

284

195

        <carousel
                per-page="6"
                paginationColor="#d8d8d8"
                paginationActiveColor="#00d1b2"
                :rtl="true"
                autoplayDirection="backward"
                easing="linear"
        >
</carousel>

[quinnlangille]

Hey @zymawy, we do not have an rtl prop, so adding :rtl="true" won't do anything. Adding autoplayDirection=backward is working fine on my end. Can you send a fiddle or some interactive reproduction of the bug so we can take a deeper look?

[rnunot]

I can confirm this is not working.

Here's a reproduction: https://codesandbox.io/s/j2y8vnqxvy

If the dir attribute is set to rtl the slides will display to the left of the first slide and will be inaccessible while additional blank slides will be added to the right.

If you set dir="ltr" and use autoplayDirection="backward" then the result wont be truly rtl either because the slides order will be inverted.

[quinnlangille]

Thanks for the repro @rnunot, this is definitely an issue. I'll add the bug flags ASAP and hopefully someone can investigate. I have a feeling it has something to do with the fix made for #323, could be a good place to start investigating for whoever decides to make the fix!

[utkarshnag]

@rnunot setting autoplayDirection to backward would make the last slide to appear so that the autoplay can be started from the last slide to the first one in rtl fashion. Ideally I think you should not use both dir and autoplayDirection.

[rnunot]

@utkarshnag

setting autoplayDirection to backward would make the last slide to appear so that the autoplay can be started from the last slide to the first one in rtl fashion.

That's the issue though, to truly support rtl layouts the slide order must be reversed, we can't simply start on the last slide.

autoplayDirection probably isn't the best solution for this issue since it actually does something else (start on the last slide) which has its uses in both ltr and rtl directions.

Currently rtl can be achieved with a workaround but this is far from ideal.

[quinnlangille]

@rnunot I'm pretty unfamiliar with rtl layouts, but what you're suggesting is that in addition to setting scroll direction to backwards and starting on the last slide, we should also switch slides from

LTR: [ 1, 2, 3, 4 ]
RTL: [ 4, 3, 2, 1 ]

If that makes sense, should be a simple fix! Lemme know if I'm missing any requirements, and if not I can switch this to a feature request :octocat:

[rnunot]

@quinnlangille That seems about right but I'm not sure if that implementation is the best...
Starting on the last slide and inverting the order will work assuming the carousel is inside an element with dir="ltr", that's basically what I did in my workaround.

If you check the reproduction once you toggle to RTL, the slides and pagination buttons will correctly change their order but vue-carousel will still expect the slides to be to the right.

Ideally everything should work as intended in both directions, maybe with a new isRtl prop?

To give you a bit more context, here's my App.vue:

<template>
  <div id="app" :dir="direction">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',

  computed: {
    direction() {
      return this.$store.getters.isRtl ? 'rtl' : 'ltr';
    },
  },
};
</script>

I set the direction in my App.vue based on the current language and let the browser worry about most of the heavy lifting, having to force dir="ltr" in some components just feels like an hack.

Not sure if this will help but here's an example of another carousel component implementing RTL based on the dir attribute: RTL Swiper demo

I've found the easiest is to think of an RTL layout as a mirrored version of the LTR one but if you're interested you can find more information in the Material design rtl guidelines

That got a bit bigger than I expected so let me know if anything wasn't clear

[quinnlangille]

Our RTL has been upgraded thanks to @farnabaz! I'm going to close this, as from what I can tell we've met all the requirements listed above! If anyone has any more suggestions, please don't hesitate to ask :octocat: