Question

我已实施react-slick。当我放置slickGoTo和slidesToScroll时我正面临问题。当页面加载最初调用slickGoTo到第4个。一旦完成，它将失去对slideToScroll的控制，并且最后一项不可见。

   <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 method breaking the carousel

Answer 1

您的问题是您设置的某些选项彼此冲突。所以现在你有13个项目，如果你添加了slidesToScroll:5，那么光滑计算你的卷轴是从0开始并且变为+5。

因此，当您设置slickGoTo(4)时，它会转到第5项，现在您有4个项目，前面有4个项目，所以如果您尝试前进或后退，则自slidesToSroll: 5以来不会

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

在slickGoTo之后，React滑块不显示最后一项

1 个答案: