在 slickGoTo 之后反应滑块不显示最后一项

Posted 2023-02-25

【中文标题】在 slickGoTo 之后反应滑块不显示最后一项

【英文标题】：React slider not showing last item after slickGoTo

【发布时间】：2018-02-27 14:54:55

【问题描述】：

我已经实现了 react-slick。当我放置 slickGoTo 和 slidesToScroll 时遇到问题。当页面加载最初调用 slickGoTo 到第四个。一旦完成，它就会失去对 slidesToScroll 的控制，并且最后一个项目不可见。

   <div style="background: red; padding: 40px; margin: 0;"> <div 
class="firstDiv">
    <div><h1 style="font-size: 5em; margin: 0;">E</h1>
        Yay, this is a caption. Look, we're on the fifth picture!<br>But we can't scroll to the first picture in the thumbnails anymore :(</div>
</div>
<div class="thumbnails">
   <div><h1>A</h1></div>
    <div><h1>B</h1></div>
    <div><h1>C</h1></div>
    <div><h1>D</h1></div>
    <div><h1>E</h1></div>
    <div><h1>F</h1></div>
    <div><h1>G</h1></div>
    <div><h1>H</h1></div>
    <div><h1>I</h1></div>
    <div><h1>J</h1></div>
    <div><h1>K</h1></div>
    <div><h1>L am before last</h1></div>
    <div><h1>am last</h1></div>
</div>
enter code here

$('.thumbnails').slick(
slidesToShow: 5,
slidesToScroll: 5,
centerMode: false,
infinite: false
);
$('.thumbnails').slickGoTo(4);

http://jsfiddle.net/svx2dzwL/

我在 *** 中有同样的问题，但没有帮助。 Slick Slider slickGoTo method breaking the carousel

【参考方案1】：

您的问题是您设置的某些选项相互冲突。 所以现在你有 13 个项目，因为你添加了slidesToScroll:5，所以 slick 计算卷轴的方式是从 0 开始到 +5。

因此，当您设置slickGoTo(4) 时，它转到第 5 项，现在您有 4 项落后和 4 项领先，所以如果您尝试后退或前进，您将不会因为slidesToSroll: 5。

解决此问题的方法是允许infinite scrolling，或降低slidesToScroll 以匹配slickGoTo

【讨论】：

我要求不要无限滚动和slidesToscroll 5（：你能建议我任何其他解决方案

不确定是否光滑，但如果您可以切换到另一个滑块，则可以使用 owl 滑块轻松完成。这是一个工作演示：jsfiddle.net/cdzaqtmr

我已经通过 slickGoto 做了其他方式。很快我会发布的。感谢您的意见。干杯:)