引导旋转木马-旋转木马.On不是一个函数
Bootstrap carousel - carousel.on is not a function
我正在使用这个标准的Bootstrap旋转木马:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-caption">
<h1>App Preview</h1>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h1>Contact Details</h1>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h1>Choose plan</h1>
</div>
</div>
<div class="item">
4
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
@*<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>*@
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
@*<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>*@
<span class="sr-only">Next</span>
</a>
</div>
和我试图隐藏'上一个'和'下一个'按钮分别,如果用户是在旋转木马的第一个或最后一个项目:
$('.carousel').carousel.on('slid', '', function () {
var $this = $(this);
$this.children('.carousel-control').show();
if ($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
} else if ($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right.carousel-control').hide();
}
});
在上面的JavaScript的第一行,我得到一个'carousel '。On不是一个函数错误。JQuery显然可以正常工作,并且可以识别carousel对象。以下是我在ASP顶部使用的内容。. NET MVC页面,使用carousel:
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
应该是
$('.carousel').on('slid', '', function () {
...
});
JSFiddle演示
相关文章:
- 禁用旋转木马中的下一个按钮和上一个按钮
- 在引导程序旋转木马中显示下一个图像
- 如何在猫头鹰旋转木马中滑动所有可见项目,而不是使用上一个/下一个按钮
- Jquery幻灯片中的列表,连接第一个和最后一个列表元素以创建旋转木马
- 无限旋转木马与下一个和上一个显示
- 使显示下一个/上一个部分的旋转木马响应
- 下一个和上一个按钮将在OWL旋转木马上滑动2个项目
- 猫头鹰旋转木马,到达第一个/最后一个项目后导航被禁用
- 异步猫头鹰旋转木马在一个页面中
- 引导旋转木马-旋转木马.On不是一个函数
- 旋转木马与图像的下一个/上一个悬停
- 我可以在一个函数中初始化引导旋转木马吗?或者只能在ready函数中完成
- 是否有可能覆盖sencha触摸旋转木马上一个和下一个功能
- 如何开发一个没有javascript的旋转木马
- 如何使一个静态旋转木马与不同的图像大小,而不破坏响应
- 旋转木马下一个和上一个按钮
- Jquery旋转木马为一个引导网站覆盖我的页面滚动
- 引导旋转木马传递元素一个接一个
- 引导:显示在旋转木马产品滑块上的最小视图上只有一个产品
- 用很多物品做一个大旋转木马