使用 JQuery 事件在引导幻灯片操作后显示文本答案

【问题标题】：Show Text After Bootstrap Slide Action Using JQuery Event使用 JQuery 事件在引导幻灯片操作后显示文本
【发布时间】：2023-04-08 18:41:01
【问题描述】：

我正在尝试在 Bootstrap 中的每个图像（我有三张幻灯片）的幻灯片操作完成后，在轮播下方显示一个链接。我正在尝试使用 slid.bs.carousel 方法，但它不起作用。这是我正在使用的 JQuery，如果您有任何建议，请告诉我 - 包含轮播的 div 是#sticksCarousel（而不是默认的 '#myCarousel'）

$('#sticksCarousel').on('slid.bs.carousel', function() {
alert("BALLS");
});

谢谢！

编辑：这是我用于轮播的 HTML...

<div class="row imgSlider">    
<div class="col-md-10 col-md-offset-1 imgSlider">
<div id="sticksCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#sticksCarousel" data-slide-to="0" class="active"></li>
<li data-target="#sticksCarousel" data-slide-to="1"></li>
<li data-target="#sticksCarousel" data-slide-to="2"></li>
</ol>
<section class="carousel-inner">
<div class="item active"><img src="img/slide1.png" alt="blah" style="width:100%;"></div>
<div class="item"><img src="img/slide2.png" alt="blah" style="width:100%;"></div>
<div class="item"><img src="img/slide3.png" alt="blah" style="width:100%;"></div>
</section><!--carousel-inner-->
<a href="#sticksCarousel" class="left carousel-control" data-slide="prev"><span     class="glyphicon glyphicon-chevron-left"> </span></a> <a href="#sticksCarousel" class="right      carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span>    </a>
</div><!--sticksCarousel-->
<p id="sticksCarouselMessage">HEY!</p>
</div>
</div>   
<script type="text/javascript">
$('.carousel').carousel({
interval: 4000 })
$('#sticksCarousel').on('slid.bs.carousel', function() { alert("BALLS"); });
</script>

基本上我想要做的是让 id 'sticksCarouselMessage' 下的段落在每次轮播滑动动作完成时更改，现在它只是设置为'嘿'。我使用 javascript 警报功能作为测试，以查看引导方法 slid.bs.carousel 是否在我的网站上运行，但现在不是。

更新：

这是我对所有 HTML 内容所做的更改......它仍然无法正常工作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title> 
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
<link href="css/lightbox.css" rel="stylesheet" />
<style>
body {
background:url(img/body_bg.png) repeat;
}
.sticksNav {
height:70px;
}
.headerImg{
margin-bottom:20px;
}

</style>
<script type="text/javascript">
$(document ).ready.(function() {    
$('.carousel').carousel({
interval: 4000 });
$('#sticksCarousel').on('slid.bs.carousel', function() { 
$("#sticksCarouselMessage").text("It worked!");
});
});
</script>  
</head>
<div class="container">
<div class="row header">
    <div class="col-md-10 col-md-offset-1">
        <div class="headerImg">
            <img src="img/header_img.png" style="width:100%; height:auto;">
        </div>
        <div class="navbar navbar-default">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Project name</a>
            </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
           </ul>
     </div><!--/.nav-collapse -->
  </div>

</div><!--End Header-->
<div class="row imgSlider">    
<div class="col-md-10 col-md-offset-1 imgSlider">
<div id="sticksCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#sticksCarousel" data-slide-to="0" class="active"></li>
<li data-target="#sticksCarousel" data-slide-to="1"></li>
<li data-target="#sticksCarousel" data-slide-to="2"></li>
</ol>
<section class="carousel-inner">
<div class="item active"><img src="img/slide1.png" alt="blah" style="width:100%;"></div>
<div class="item"><img src="img/slide2.png" alt="blah" style="width:100%;"></div>
<div class="item"><img src="img/slide3.png" alt="blah" style="width:100%;"></div>
</section><!--carousel-inner-->
<a href="#sticksCarousel" class="left carousel-control" data-slide="prev"><span   class="glyphicon glyphicon-chevron-left"> </span></a> <a href="#sticksCarousel" class="right   carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span>   </a>
</div><!--sticksCarousel-->
<p id="sticksCarouselMessage">HEY!</p>
</div>
</div>   




</div><!--End Container-->
<body>
</body>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
$(document ).ready.(function() {    
$('.carousel').carousel({
interval: 4000 });
$('#sticksCarousel').on('slid.bs.carousel', function() { 
$("#sticksCarouselMessage").text("It worked!");
});
});
</script> 
</html>

我只想更改 p 中 ID 为 'sticksCarouselMessage 的内容以显示“它成功了！”滑动动作完成后。

【问题讨论】：

标签： jquery twitter-bootstrap carousel twitter-bootstrap-3

【解决方案1】：

在 twitter 引导示例页面：http://getbootstrap.com/javascript/#carousel，此事件有效。

$('.bs-example').on('slid.bs.carousel', function() {
    alert("BALLS");
});

您使用的是哪个版本的 Bootstrap？早期版本对滑动事件有不同的名称。如果您使用的是 Bootstrap 3，那么还有其他一些问题，所以如果您可以发布更多关于如何调用轮播的信息，可能会有所帮助。

编辑：雅各布，您需要在文档中初始化轮播。准备就绪：然后你可以注册事件。例如：

引导程序 3：

<script>
  $( document ).ready(function() {
    $('.carousel').carousel({ interval: 4000 });
    $('#sticksCarousel').on('slid.bs.carousel', function() { alert("BALLS"); });
 });
</script>

引导程序 2：

<script>
  $( document ).ready(function() {
    $('.carousel').carousel({ interval: 4000 });
    $('#sticksCarousel').on('slid', function() { alert("BALLS"); });
 });
</script>

【讨论】：

感谢佩特拉的回复！我在上面的问题中添加了更多内容。如果您还需要什么，请告诉我。
再次感谢 Petra 的快速响应，我已按照您之前的建议进行了更改，但仍然没有显示警报，我添加了更多 HTML 信息。也回答这个问题。再次感谢您的帮助。
不知道是不是和平滑滚动插件冲突？你能看看没有它是否可以工作吗？可能张贴小提琴？
我摆脱了那个插件，仍然没有。继承人的jsfiddle，它不完全相同，但你可以得到一般的想法。 jsfiddle.net/d6eya。感谢您的帮助！
嗨 Jacob，您使用的是较早版本的 Bootstrap (2)。在那个版本中，事件被简单地称为“滑动”。所以使用'slid'而不是'slid.bs.carousel'（在你的小提琴上工作正常）或者更新Bootstrap 3。

【解决方案2】：

我正在使用$('#featureRotator').bind('slide.bs.carousel', function (e) { console.log('slide event!'); });

并且工作正常。它打印“幻灯片事件！”。据我所知，您在函数（e）中缺少事件“e”。尝试举办活动，看看它是否有效。

注意“滑动”和“滑动”。 'slide' 发生在动画之前和 'slid' 之后...因此您可以将代码添加到以下任一事件...

$('#featureRotator').bind('slide.bs.carousel', function (e) {
        console.log('slide event starts!');
    });

    $('#featureRotator').bind('slid.bs.carousel', function (e) {
        console.log('slide event finished!');
    });

【讨论】：