单击按钮时，Bootstrap轮播（“暂停”）不起作用

Question

我目前正在研究Bootstrap。一切都很好像旋转木马（图像滚动全屏），旋转木马控制左右两个我需要的。 我需要的额外的东西是旋转木马中间的暂停按钮。 当我点击“暂停”时，旋转木马应暂停，直到我点击“播放”。 为此，我使用了Jquery。

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

然而，当我点击btnPause旋转木马根本没有暂停时。 不知道我错过了什么。

完整代码：

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");
        });
    });

Answer 1

制作

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

到

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

而不是测试