在Bootstrap後顯示文本使用JQuery事件的幻燈片操作

我試圖在Bootstrap中爲每個圖像（我有三張幻燈片）的幻燈片操作完成後，在旋轉木馬下方顯示一個鏈接。我正在嘗試使用sliding.bs.carousel方法，但它不起作用。這裏是我使用jQuery，請讓我知道如果您有任何建議 - 包含轉盤股利是#sticksCarousel（而不是默認的「#myCarousel」）在Bootstrap後顯示文本使用JQuery事件的幻燈片操作

$('#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」段落每次更改輪轉滑動操作是完整的，現在它只是'HEY'。我使用JavaScript警報函數只是作爲一個測試，看看引導方法sliding.bs.carousel是否在我的網站上工作，這是不正確的。

UPDATE：

在這裏，我所有的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來顯示「It works！」在幻燈片操作執行後。

來源

2013-09-21 Jacob Buller

在twitter引導示例頁面上：，此事件有效。

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

您使用的是什麼版本的Bootstrap？早期版本的滑動事件的名稱不同。如果您使用的是Bootstrap 3，那麼還有其他一些問題，所以如果您可以發佈更多關於如何調用可能有所幫助的輪播的信息。

編輯：雅各布，你需要初始化輪播在一個document.ready：然後你可以註冊事件。例如：

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

來源

2013-09-21 13:50:39

感謝您的迴應佩特拉！我在上面的問題中提出了更多內容。需要幫助請叫我。 –

再次感謝Petra的快速反應，我做了以前建議的更改，但它仍未顯示警報，我添加了更多HTML信息。也是這個問題。再次感謝你的幫助。 –

我不知道這是否與平滑滾動插件衝突？你可以看看它沒有它嗎？可能會張貼小提琴？ –

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

和工程罰款。它打印'滑動事件！'。從我所看到的，你在函數（e）中錯過了事件'e'。嘗試有事件，看看它是否有效。

注意'滑動'和'滑動'。 '幻燈片'發生在動畫之前，'滑動'之後......因此您可以將您的代碼添加到以下任一事件中...

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

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

來源

2015-08-14 18:32:23 Mahder

$（'＃featureRotator'）是我使用旋轉木馬來滑動圖像的div ... – Mahder

在Bootstrap後顯示文本使用JQuery事件的幻燈片操作

回答

相關問題