Autoplay other direction (rtl instead of ltr)

[mkruip05]

Feature request is related to

• embla-carousel (core package)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-docs (documentation website)

Is your feature request related to an issue?

In the documentation it is possible to set the direction of a slider to a different setting (ltr or rtl), but it seems not working if you use the autoslide plugin.

Describe the solution you'd like

An extra option for the autoplay plugin to set the direction the other way (rtl instead of ltr)

[davidjerleke]

Hi @mkruip05,

I just tested the autoplay plugin with rtl and it's working just fine. Just follow these steps:

1. Fork the Autoplay CodeSandbox by clicking the Edit code button.
2. Set the direction option to rtl like so { direction: 'rtl' }.
3. Follow these instructions in the docs.

That's enough to get it working.

Best,
David

[mkruip05]

I am using the code below, can you tell me what I am doing wrong. Hope you can help me with this issue.

`import EmblaCarousel from 'embla-carousel'
import Autoplay from 'embla-carousel-autoplay'

const teamSlider = document.querySelector('.c-team.embla');

if (teamSlider) {
const setupPrevNextBtns = (prevBtn, embla) => {
prevBtn.addEventListener('click', embla.scrollPrev, false);
};

const setupEmblaCarousel = (teamSlider) => {
const viewPort = teamSlider.querySelector(".embla__viewport");
const prevBtn = teamSlider.querySelector(".embla__button--prev");

const embla = EmblaCarousel(viewPort, {dragFree: true, loop: true, align: 0, direction: "rtl"}, [Autoplay({
  delay: 3000,
  stopOnMouseEnter: true,
})])

setupPrevNextBtns(prevBtn, embla);

};

setupEmblaCarousel(teamSlider)
}`

[davidjerleke]

The content needs to be rtl. One way to do it is to set it on the HTML like so:

 <div class="embla" dir="rtl">

As described in the docs:

[davidjerleke]

@mkruip05 please read the contribution guidelines. It seems like you've missed quite a lot about how to write your report in order to get proper help. From the guidelines:

Do not: Provide a link to a production site. That's not a test case.

[mkruip05]

@davidjerleke sadly doesn't work. I will try to find another workaround. Thanks for your help.

[davidjerleke]

@mkruip05 maybe you’re misunderstanding what rtl is then. rtl is there to support languages that are read from right to left.

[mkruip05]

@davidjerleke yes that is right. I was hoping I could change the direction of the autoplay instead of aligning the text to the right.

[davidjerleke]

Ok so that’s where the confusion comes from. You wrote ltr and rtl. These abbreviations are almost always used to specify the content direction in web development.

What you want is to be able to set the autoplay to move in the opposite direction. It should advance to the previous snap instead of next.

This is not possible with the current state of things.

I guess you missed this:

• ⭐ v8 #321

Please read that. Thank you for understanding.

Best,
David