我想显示一个 slider ,如果 slider 进入视口(viewport),它应该滚动到最后一张幻灯片。
为此,我使用了 Slick Slider ( http://kenwheeler.github.io/slick/)。
<html>
<div class="slider-games">
<div>
<h1>Headline 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div>
<h1>Headline 2</h1>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h1>Headline 3</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div>
<h1>Headline 4</h1>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h1>Headline 5</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div>
<h1>Headline 6</h1>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</html>
幻灯片“标题 6”应该处于事件状态。
这是 JS 代码:
$('.slider-games').slick({
dots: true,
arrows: true,
slidesToShow: 1,
});
我尝试了 rtl:true
属性,但在我的情况下它不起作用。
而且我看到有一个名为slickGoTo
的方法。我想这就是我需要的。但我不知道如何使用它。
还有一个 Unresolved 问题,当 slider 进入视口(viewport)的可见区域时, slider 应该滚动到最后。
最佳答案
$('.fade').on('init', function(event, slick) {$(this).find(".slick-dots li").last().trigger("点击") ; });
只要在你光滑的 slider 代码之前保留它,否则一切都很完美
关于javascript - 光滑的 slider : Scroll to last slide if slider is in viewport,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53224167/