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

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>

幻灯片 "Headline 6" 应该处于活动状态。

这是 JS 代码：

$('.slider-games').slick({
    dots: true,
    arrows: true,
    slidesToShow: 1,
});

我尝试了 rtl:true 属性，但在我的情况下它不起作用。

而且我看到有一个方法叫做slickGoTo。我想这就是我需要的。但是不知道怎么用

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

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

Answer 1

这是我提供的另一个例子

<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 2

$('.fade').on('init', function(event, slick) {$(this).find(".slick-dots li").last().trigger( "click"); });

只要在你漂亮的滑块代码之前保留这个，否则一切都很完美

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 触发滚动事件，您需要能够滚动。除了滚动事件，您还可以创建一个计时器。

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

Slick Slider: Scroll to last slide if slider is in viewport

html

javascript

css

jquery

slick.js