使用JQuery事件在Bootstrap幻灯片操作后显示文本 [英] Show Text After Bootstrap Slide Action Using JQuery Event
问题描述
在Bootstrap中为每个图像(我有三张幻灯片)完成滑动操作后，我试图在转盘下方显示一个链接.我正在尝试使用slid.bs.carousel方法，但无法正常工作.这是我正在使用的JQuery，如果您有任何建议，请告诉我-包含轮播的div是#sticksCarousel(而不是默认的'#myCarousel')
I'm trying to make a link show up below the carousel after the slide action finishes for each image (I have three slides) in Bootstrap. I am trying to use the slid.bs.carousel method and it's not working. Here is the JQuery I am using, please let me know if you have any suggestions - the div containing the carousel is #sticksCarousel (instead of the default '#myCarousel')
$('#sticksCarousel').on('slid.bs.carousel', function() {
alert("BALLS");
});
谢谢！
这是我为轮播使用的HTML ...
This is the HTML that I have for the carousel...
<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警报功能作为测试，以查看引导方法slid.bs.carousel是否正在我的网站上运行，而现在还不行.
Basically what I am trying to do is get the paragraph under id 'sticksCarouselMessage' to change each time the carousel slide action is complete, right now its just set as 'HEY'. Im using the javascript alert function just as a test to see if the bootstrap method slid.bs.carousel is working on my site, which it isn't right now.
更新:
这是我对所有HTML内容所做的更改...仍然无法使用
Here the changes I have made with all the HTML content... it still doesn't work tho
<!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>
我只想更改ID为'sticksCarouselMessage的p中的内容以显示它起作用了！"在执行滑动动作之后.
I just want to change the content in the p with the id 'sticksCarouselMessage to display "It worked!" after the slide action was performed.
推荐答案
在twitter引导示例页面上: http://getbootstrap.com/javascript/#carousel ，此事件有效.
On the twitter bootstrap example page: http://getbootstrap.com/javascript/#carousel, this event works.
$('.bs-example').on('slid.bs.carousel', function() {
alert("BALLS");
});
您使用的是哪个版本的Bootstrap?较早版本的slid事件具有不同的名称.如果您使用的是Bootstrap 3，那么还会有其他问题，因此，如果您可以发布有关如何调用轮播的更多信息，则可能会有所帮助.
What version of Bootstrap are you using? Earlier versions had a different name for the slid event. If you are using Bootstrap 3 then there is some other issue, so if you can post more information about how you are calling the carousel that could help.
Jacob，您需要在文档中初始化轮播. 然后，您可以注册事件.例如:
Jacob, you need to initialise the carousel in a document.ready: Then you can register events. eg.:
引导程序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>
这篇关于使用JQuery事件在Bootstrap幻灯片操作后显示文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
