我试图在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”下的段落,现在将其设置为“ HEY”。我正在使用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>
我只想更改ID为'sticksCarouselMessage的p中的内容,以显示“它起作用了!”。在执行滑动动作之后。
在twitter bootstrap示例页面上:http : //getbootstrap.com/javascript/#carousel,此事件有效。
$('.bs-example').on('slid.bs.carousel', function() {
alert("BALLS");
});
您正在使用哪个版本的Bootstrap?较早版本的slid事件具有不同的名称。如果您使用的是Bootstrap 3,则还有其他问题,因此,如果您可以发布有关如何呼叫轮播的更多信息,可能会有所帮助。
编辑:Jacob,您需要在document.ready中初始化轮播。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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句