javascript - 光滑的 slider : Scroll to last slide if slider is in viewport

标签 javascript jquery html css slick.js

我想显示一个 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 应该滚动到最后。

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

最佳答案

$('.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/

相关文章:

javascript - 如果任何文本字段(同一类)有文本,则启用提交按钮

javascript - 来自数组的动态 HTML 导航栏

javascript - 使用正则表达式或 JavaScript 提取 ID 的最后一部分

javascript - 鼠标悬停时无限 move 对象

javascript - jQuerys $.each() 是如何工作的?

javascript - 根据复选框禁用/启用按钮

javascript - 单击时更改按钮颜色

php - 正则表达式和 PHPUnit 断言 : count how many times word matches in repeating pattern

javascript - 更改弹出窗口的内容类型

javascript - 验证视频时间戳