javascript - 仅在用户滚动到 div 部分后才开始自动播放光滑的滑块

Question

我的幻灯片代码如下所示：

<section class="get-in-touch">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h2 data-aos="fade-right" data-aos-duration="800">
                    <?php echo get_field('section_title',57) ?><span class="fk-main-color">.</span>
                </h2>
            </div>
            <div class="xcol-lg-12 container-fluid steps-row" data-aos="fade-down" data-aos-duration="800">
                <div class="xrow slide-container" id="featured-slider2">
                    <?php
                    $count = 1;
                    foreach ($steps as $item):
                    ?>
                    <div class="xcol-md-5 xcol-lg-6 slide-item">
                        <div class="boxes">
                            <div class="counter"><?php echo $count; ?></div>
                            <div class="items">
                                <h3><?php echo $item["step_title"]; ?></h3>
                                <p>
                                    <?php echo $item["step_description"]; ?>
                                </p>
                            </div>
                        </div>
                    </div>
                    <?php
                    $count++;
                    endforeach;
                    ?>
                </div>
            </div>
        </div>
    </div>
    <div class="arrows">
        <div class="container">
            <span class="fa fa-long-arrow-left prev2"></span>
            <span class="fa fa-long-arrow-right next2"></span>
        </div>
    </div>
</section>

我已经将这个光滑的滑块初始化为：

jQuery('#featured-slider2').slick({
    slidesToShow: 2,
    slidesToScroll: 1,
    arrows: true,
    dots: false,
    infinite: true,
    speed: 1000,
    autoplay: true,
    prevArrow: jQuery('.prev2'),
    nextArrow: jQuery('.next2'),
    responsive: [
        {
            breakpoint: 991,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 1,
            }
        },
        {
            breakpoint: 767,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 1,
            }
        },
        {
            breakpoint: 576,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
            }
        }
    ]

});

它位于页面的较低位置，当用户到达那里时，通常首先显示第 4 个滑块，如果用户首先开始看到第 4 个滑块，这将没有意义，因此是否可以仅在用户一次自动播放滑块滚动到此部分get-in-touch

标签： javascriptjqueryslick.js