RTL: bug

[YangBo29]

Guidelines for posting a new issue

react-slick set RTL is true, init state is wrong.

• Please replicate your issue with this CodeSandBox and provide a link to it along with the issue description

[YangBo29]

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

[YangBo29]

这个函数中，容器高度的计算，在纵向和横向方面应该区分。虽然不知道这样改动是否符合设计初衷，不过这个处理可以修复 设置 adaptiveHeight : true 后 纵向滚动模式视口高度异常的问题。

adaptHeight = () => { if (this.props.adaptiveHeight && this.list) { const elem = this.list.querySelector([data-index="${this.state.currentSlide}"]); if (this.props.vertical) { this.list.style.height = getHeight(elem) * this.props.slidesToShow + 'px'; } else { this.list.style.height = getHeight(elem) + 'px'; } } };

初始序号的处理，在无限滚动和非无限滚动的计算上有一定的不同，并且在初始位置上有“错误” 举例： 当有 9条数据时，每页显示4条，正序分页情况时[’1234‘,'5678','9]; 倒叙: [’9876‘,'5432','1']; 正序时时没有问题的。但是设置rtl倒叙就出现了问题，理论上我们仍然应该保持和正序情况一样，从第一页的第一条开始展示并且滚动，那显示情况应该是['9','8765','4321'] 初始显示4321, 而不是计算后的补位处理后的结果[’9876‘,'5432','1987'] 初始显示 1987； 但是: if (spec.rtl && spec.currentSlide === undefined) { currentSlide = slideCount - 1 - spec.initialSlide; } 这样是记录的倒叙的第一条，但是初始显示位置会受到数据长度和每页显示数量的严重影响，导致出现严重的偏差。例如官方的案例中，初始位置是从2开始的。

下面是我根据您的代码和逻辑进行的修复，因为无限循环时您复制出来了一组，所以进行了 2的处理 但是现在我还是不理解，为什么循环模式下会将所有数据全部复制了一遍。这样是很耗费性能的。 if (spec.rtl && spec.currentSlide === undefined) { if (spec.infinite) { currentSlide = slideCount - spec.slidesToShow 2 - spec.initialSlide; } else { currentSlide = slideCount - spec.slidesToShow - spec.initialSlide; } }

或许我的修改违背了您的初衷，您的插件给了我很大帮助，真希望可以变得更好

[mandadimuralidharreddy]

strangely I am able to solve RTL issue with below param meter to slider component currentSlide={0} This props not documented anywhere

[s1576573]

I encountered the same issue, try this package instead: https://github.com/ryangphan/react-slick-pnth . It is also react-slick, but with improved rtl support

[jvjijith]

I encountered the same issue, try this package instead: https://github.com/ryangphan/react-slick-pnth . It is also react-slick, but with improved rtl support

Thanks Bro, this helped a lot

[atefBB]

I encountered the same issue, try this package instead: https://github.com/ryangphan/react-slick-pnth . It is also react-slick, but with improved rtl support

Thx ! You saved my day !