当单击按钮时，引导旋转木马(“暂停”)不工作

I am currently working on Bootstrap. Everything works fine like carousel (Image Roll full screen), carousel controls both left and right as I need. The extra thing what I need is that pause button in middle of the carousel. when i click on 'pause' the carousel should pause until I click on 'Play'. To do this, I used Jquery.

我目前正在做Bootstrap。一切都很好，就像旋转木马(图像滚动全屏)，旋转木马同时控制左右。我需要的是旋转木马中间的暂停按钮。当我点击“暂停”时，旋转木马应该暂停，直到我点击“播放”。为此，我使用了Jquery。

$(".carousel").carousel("pause");

However, when I click on btnPause carousel not pausing at all. Don't know what I am missing.

然而，当我点击btnPause旋转木马时，它根本就不会停下来。不知道我错过了什么。

Complete Code :

完整的代码:

HTML

<div id="myCarousel" class="carousel carousel-fade slide">
.
.
.
//Controls
<a class="bgLeft" href="#myCarousel" data-slide="prev"></a>
<a class="bgMid" id="btnPause"></a>
<a class="bgRight" href="#myCarousel" data-slide="next"></a>
</div>

CSS

.bgMid {
background: url('/Img/pause.png')no-repeat;
width: 35px;
height: 35px;
display: block;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
margin-top: -17px;

}

Jquery

$(document).ready(function () {
        $("#myCarousel").carousel({
            interval: 5000,
            pause: "false"
        });
        $("#btnPause").on('click', function () {               
            $(".carousel").carousel("pause");
        });
    });

1 个解决方案

#1

Make

使



$("#btnPause").on('click', function () {               
    $(".carousel").carousel("pause");
});

来



$("#btnPause").on('click', function (e) {
    e.preventDefault();
    $(".carousel").carousel("pause");
});

And than test

和比测试

#1