akiran / react-slick

React carousel component
http://react-slick.neostack.com/
MIT License
11.72k stars 2.1k forks source link

bug: RTL show #1764

Open xrkffgg opened 4 years ago

xrkffgg commented 4 years ago

Describe

I think in RTL, from right to left, it's 123, not 312

CodeSandbox

https://codesandbox.io/s/react-slick-playground-lk4i7?file=/index.js

https://github.com/akiran/react-slick/blob/80eb208cb7454cc63621f3bcf07a2b8c32999afa/src/track.js#L183 It may be fix in this place

--preCloneSlides.concat(slides, postCloneSlides).reverse();
++preCloneSlides.concat(slides.reverse(), postCloneSlides.reverse());

And preCloneSlides is not the last node, but the first node.

I hope this will be fix.

rsagiev-simtechdev commented 4 years ago

I have the same problem. And .slick-slider slider does not switch diriection attribute

https://codesandbox.io/embed/react-slick-cwcld?fontsize=14&hidenavigation=1&theme=dark

mhmdAljefri commented 4 years ago

The Same

selmaBarati commented 1 year ago

Hi , thank you for solve this problem . but I have this problem yet , I change my track.js file as you edit it , but still it doesn't work for me . I have this issue at the first carousel show me the last slide and also it doesn't show me the slide 4 too , this is my code : by the way I had to set infinite: true , because if I set it sa fasle , when I click on next button it suddenly jump to last slide , in this case , jump to slide 7 , and also I had to use prev() for next button and vice verca . could you please share your code with us , Thanks alot . const TestComponent2 = () => { const settings = { infinite: true, rtl:true, speed: 500, } const carouselData = [ { id: 1, content: 'Slide 1', }, { id: 2, content: 'Slide 2', }, { id: 3, content: 'Slide 3', }, { id: 5, content: 'Slide 5', }, { id: 6, content: 'Slide 6', }, { id: 7, content: 'Slide 7', }, ]; let carousel = useRef() const next = ()=>{ carousel.prev(); } const prev = ()=>{ carousel.next(); } return (

(carousel = node)} > {carouselData.map((slide) => (

{slide.content}

))}

); };