javascript - 进入视口(viewport)时触发Flexslider开始幻灯片播放

Question

我正在使用Flexslider在网站上，但我不希望在幻灯片容器位于用户视口(viewport)内之前开始幻灯片放映。我该怎么做呢？ Here's直接链接到他们的 JS。这是我的 HTML:

            <div class="flexslider">
                <h3 class="centered-text">blah blah blah</h3>
                <ul class="slides">
                    <li>
                        <img src="assets/slides/slide-01.svg">
                        <p class="flex-caption">blah blah blah</p>
                    </li>
                    <li>
                        <img src="assets/slides/slide-02.svg">
                        <p class="flex-caption">blah blah blah</p>
                    </li>
                    <li>
                        <img src="assets/slides/slide-03.svg">
                        <p class="flex-caption">blah blah blah</p>
                    </li>
                    <li>
                        <img src="assets/slides/slide-04.svg">
                        <p class="flex-caption">blah blah blah</p>
                    </li>
                    <li>
                        <img src="assets/slides/slide-05.svg">
                        <p class="flex-caption">blah blah blah</p>
                    </li>
                </ul>
            </div>

Answer 1

查看How to tell if a DOM element is visible in the current viewport?对于工作 isInViewport() 函数。然后，您可以检查 flexslider 元素是否在视口(viewport)中，当它在视口(viewport)中时，我认为只需 flexslider.start() 即可。请务必将幻灯片设置为 false，以便在页面加载时停止。