Question

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

我正在为此使用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

Answer 1

$（'。fade'）。on（'init'，function（event，slick）{$（this）.find（“。slick-dots li”）。last（）。trigger（“ click”） ;}）;

只需将其保留在光滑的滑块代码之前，否则一切就完美了

Answer 2

这是我要提供的另一个示例

<html>
<head>
    <title>My Now Amazing Webpage</title>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.css" />
</head>
<body>

    <div class="fade">
        <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>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.min.js"></script>


    <script type="text/javascript">
        $(document).ready(function () {
            $('.fade').slick({
                dots: true,
                infinite: true,
                speed: 700,
                autoplay: true,
                autoplaySpeed: 2000,
                arrows: false,
                slidesToShow: 1,
                slidesToScroll: 1
            });

        });
    </script>

</body>
</html>

Answer 3

$( window.top ).scroll( function () {
    var windowHeight = $( window.top ).height();
    var scrolledHeight = $( window.top ).scrollTop();
    var sliderPosition = $( window.top.document ).find( ".slider-games" ).offset().top;
    var sliderheight = $( window.top.document ).find( ".slider-games" ).height();
    if ( ( windowHeight + scrolledHeight ) > ( sliderPosition + ( sliderheight / 2 ) ) ) {
        $('.slider-games').slick('slickGoTo', $('.slider-games').get(0).slick.$slides.length-1);
    }
} );

这将找出滑块在页面上的位置，并且滚动到元素的50％之后，它将滚动到最后一张幻灯片。要从jquery触发滚动事件，您需要能够滚动。除了滚动事件，您还可以创建一个计时器。

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

3 个答案: