将播放/暂停按钮添加到引导轮播 [英] Add Play/Pause button to bootstrap carousel

问题描述

我已经阅读了有关引导轮播的几乎所有主题，但是没有找到我的问题的答案。
我在轮播中添加了两个控制按钮（播放/暂停），但是每个按钮从默认/第一张幻灯片中触发该功能。我希望能够在单击事件发生时暂停当前幻灯片并从当前幻灯片播放。

这是我的代码：

 < script src = / _ catalogs / masterpage / UHN / js / bootstrap.min.js>< /脚本> 
< script> 
 $（function（）{
 $（'。carousel'）。carousel（{interval：6000}）; 
 
 $（'＃playButton'）。click（function （）{
 $（'＃homeCarousel'）。carousel（'cycle'）; 
}）; 
 $（'＃pauseButton'）。click（function（）{
 $（'＃homeCarousel'）。carousel（'pause'）; 
}）; 
}）； 
 
< / script> 
  

和两个控件：

 <！-轮播控件-> 
< button id = playButton>播放< / button> 
< button id = pauseButton>暂停< / button> 
  

解决方案

这应该有效。我会确保您的点击事件能够按预期触发，因为引导轮播的某些元素会出现在您的元素上方并防止点击。

如果添加 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; 
头寸：绝对； 
 bottom：0px; 
} 
  

在jsFiddle中工作的演示<​​/a>

为使此功能最有意义，您可能希望轮播继续移动，甚至将鼠标悬停在上面时（否则，在做出播放选择之后，除非您移动鼠标，否则骑车行为将不会再次开始）。

根据轮播文档：

选项-暂停

默认-悬停-暂停在mouseenter上的轮播循环，并在mouseleave上恢复轮播的循环。

相反，请确保在初始化轮播时关闭此功能：

< pre class = lang-js prettyprint-override> $（'＃homeCarousel'）。carousel（{
interval：2000，
pause： false
}）;


I have read almost all the threads regarding to the bootstrap carousel, but haven't found an answer to my question. I have added two control buttons (play/pause) to the carousel, but each button fires the function from the default/first slide. I would like to be able to pause the current slide and play from the current slide whenever the click event happens.

Here is my code:

<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>

And the two controls:

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

解决方案

This should be working. I'd make sure that your click events are firing as you expect them to because some elements of the bootstrap carousel can appear above your elements and prevent clicks.

If you add the following controls in 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>

Then the following JavaScript should control starting and stopping on any frame:

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

As related to my first point, to get them to appear properly within the carousel, you can style the button group with the following CSS:

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

Working Demo in jsFiddle

For this functionality to make the most sense, you probably want the carousel to continue moving, even when hovering over it (otherwise after the play selection is made, the cycling behavior won't start up again until you move the mouse).

According to the carousel docs:

Option - pause
Default - "hover" - Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.

Instead, make sure you turn this off when you initialize the carousel like this:

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

这篇关于将播放/暂停按钮添加到引导轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！