触发Flexslider在进入视口时开始幻灯片放映

Question

我在网站上使用Flexslider，但我不希望幻灯片开始直到幻灯片容器位于用户的视口内。我该怎么做呢？ 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元素是否在视口中，当它出现时，我认为只是flexslider.start（）。请务必将幻灯片设置为false，以便在页面加载时停止播放。