javascript - Slick Slider：如果滑块在视口中，则滚动到最后一张幻灯片

问题描述

我想显示一个滑块，如果滑块进入视口，它应该滚动到最后一张幻灯片。

我为此使用了 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. 我想这就是我需要的。但我不知道如何使用它。

还有一个未解决的问题，当滑块进入视口的可见区域时，滑块应该在最后滚动。

这是一个例子：https ://codepen.io/cray_code/pen/mQEyma

标签： javascriptjqueryhtmlcssslick.js

javascript - Slick Slider：如果滑块在视口中，则滚动到最后一张幻灯片

问题描述

解决方案

推荐阅读