search

davidjerleke / embla-carousel

A lightweight carousel library with fluid motion and great swipe precision.
https://www.embla-carousel.com
MIT License
5.42k stars 164 forks source link

Autoplay other direction (rtl instead of ltr) #495

Closed mkruip05 closed 1 year ago

mkruip05 commented 1 year ago

Feature request is related to

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 commented 1 year ago

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 commented 1 year ago

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(".emblaviewport"); const prevBtn = teamSlider.querySelector(".emblabutton--prev");

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

setupPrevNextBtns(prevBtn, embla);

};

setupEmblaCarousel(teamSlider) }`

davidjerleke commented 1 year ago

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:

rtl
davidjerleke commented 1 year ago

@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 commented 1 year ago

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

davidjerleke commented 1 year ago

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

mkruip05 commented 1 year ago

@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 commented 1 year ago

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:

Please read that. Thank you for understanding.

Best, David