0

我已经实现了 react-slick。当我放置 slickGoTo 和 slidesToScroll 时遇到问题。当页面加载最初调用 slickGoTo 到第 4 个。一旦完成，它就会失去对 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/

我在stackoverflow中提出了同样的问题，但没有帮助。 Slick Slider slickGoTo 方法打破轮播

4

1 回答 1

0

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

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

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

于 2018-02-27T15:06:35.747 回答