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

【问题标题】：trigger Flexslider to start slideshow when it enters viewport进入视口时触发 Flexslider 开始幻灯片放映
【发布时间】：2015-03-05 18:34:12
【问题描述】：

我在网站上使用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>

【问题讨论】：

我不明白“幻灯片容器在用户的视口内”，您的意思是当滑块中的所有内容都加载后开始滑动？文档就绪事件？
不，当 .flexslider 在用户视口中可见时开始滑动，直到它出现才开始。现在它只是加载准备好的文档，所以当用户到达网站上的滑块位置时，我们已经完成了幻灯片放映的一半。

标签： javascript jquery flexslider woothemes

【解决方案1】：

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

【讨论】：