如何保持引导轮播暂停，直到它进入视口？

Question

编辑：此请求的原因。为了描述我的需求，在找到解决方案时添加了此编辑。我有一个轮播显示逻辑顺序第 1 步、第 2 步、第 3 步。该轮播图不是页面顶部，所以我希望它保持停止/暂停，直到用户看到它以及何时看到它，如首先，我希望用户看到第一张幻灯片，第 1 步。然而，有些用户（相信我，他们不少）不知道轮播和滑块，所以我不想错过他们对后续的看法幻灯片。这就是接下来的原因。

我想知道这个

我有一个不在主页顶部的引导程序 3.1 轮播。

相反，您在向下滚动一些“引导程序”行时“到达它”。

好吧，我希望它保持轮播停止/暂停，直到用户将页面向下滚动到轮播放置的位置（假设轮播高度为 500 像素，当至少第一个前 150 像素输入可见时）区域）

当滚动了 150 个像素时，暂停/停止应变为“播放”，因此，如果每张幻灯片之间的暂停为 5000 毫秒，则在 5000 毫秒后，下一张幻灯片应转动。

根据这个解决方案，它是 javascript 的问题，但这不是我想要的，也请原谅我，但目前我对 javascript 和 jquery 不是很擅长，所以谢谢你的任何提示和一些解释。

编辑 01 这个脚本看起来是正确的，也是一个很好的解决方案:-)，尤其是阅读该页面底部的评论，但如上所述，我错过了正确利用它的知识，感谢您的任何提示。

Answer 1

我走了很长的路，自我回答自己。

我尝试了几个插件，但它们没有效果，或者它们破坏了 Carousel 引擎。

研究了这么多，终于我找到了这个 jQuery 插件 http://www.jqueryscript.net/other/jQuery-Plugin-To-Determine-If-An-Element-Is-In-the-Viewport-Viewport-Checker .html

它工作得很好，很直接，符合预期，而且还有一个好处：我正在寻找的偏移！（耶！）

很容易实现

<script src="viewportchecker.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('.carousel').carousel('pause'); /** load page with carousel paused

    $('.carousel').viewportChecker({
        offset: 200,                  /** wait for the first 200 pixel of the element 
                                          to enter in the viewport
        callbackFunction: function(elem){
            setTimeout(function(){
                $('.carousel').carousel(''); /** remove pause
            },500);
        }
    });

});
</script>

对自己说“谢谢”:-)