添加播放/暂停按钮以引导旋转木马

Question

我已经阅读了几乎关于自举旋转木马的所有线程,但还没有找到我的问题的答案.我在旋转木马上添加了两个控制按钮(播放/暂停),但每个按钮都会从默认/第一张幻灯片中激活该功能.我希望能够在点击事件发生时暂停当前幻灯片并从当前幻灯片播放.

这是我的代码:

<script src="/_catalogs/masterpage/UHN/js/bootstrap.min.js"></script>
<script>
    $(function () {
        $('.carousel').carousel({ interval:6000 });  

        $('#playButton').click(function () {
            $('#homeCarousel').carousel('cycle');
        });
        $('#pauseButton').click(function () {
            $('#homeCarousel').carousel('pause');
        });
    });

</script>

这两个控件:

<!--Carousel controls -->
<button id="playButton">Play</button>
<button id="pauseButton">Pause</button>

Answer 1

这应该有效.我确保您的点击事件按照您的预期触发,因为引导轮播的某些元素可能出现在您的元素上方并阻止点击.

如果您在HTML中添加以下控件:

<div id="carouselButtons">
    <button id="playButton" type="button" class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-play"></span>
     </button>
    <button id="pauseButton" type="button" class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-pause"></span>
    </button>
</div>

然后,以下JavaScript应控制任何帧的启动和停止:

$('#playButton').click(function () {
    $('#homeCarousel').carousel('cycle');
});
$('#pauseButton').click(function () {
    $('#homeCarousel').carousel('pause');
});

与我的第一点相关,为了让它们在旋转木马中正确显示,您可以使用以下CSS设置按钮组的样式:

#carouselButtons {
    margin-left: 100px;
    position: absolute;
    bottom: 0px;
}

在jsFiddle工作演示

为了使这个功能最有意义,你可能希望旋转木马继续移动,即使悬停在它上面(否则在进行游戏选择之后,直到你移动鼠标才会再次启动循环行为).

根据轮播文档:

选项 - 暂停
默认 - "悬停" - 暂停轮播在鼠标中心上的循环,并在鼠标离开时恢复旋转木马的循环.

相反,请确保在初始化轮播时将其关闭,如下所示:

$('#homeCarousel').carousel({
    interval:2000,
    pause: "false"
});