Jquery 引导3转盘控件和指示器链接不工作
我抓挠我的头为什么引导3转盘控件(和指示器)链接在我的页面上不工作。这是一个简单的复制粘贴文档+一点CSS定制。代码可以在这里看到(#图库) 更新: 转盘初始化代码Jquery 引导3转盘控件和指示器链接不工作,jquery,carousel,twitter-bootstrap-3,Jquery,Carousel,Twitter Bootstrap 3,我抓挠我的头为什么引导3转盘控件(和指示器)链接在我的页面上不工作。这是一个简单的复制粘贴文档+一点CSS定制。代码可以在这里看到(#图库) 更新: 转盘初始化代码 /* GALLERY */ $('#gallery-carousel').carousel() 转盘标记 <div id="gallery-carousel" class="carousel slide"> <ol class="carousel-indicators"> <li data
/* GALLERY */
$('#gallery-carousel').carousel()
转盘标记
<div id="gallery-carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#bevog-image-1" data-slide-to="0" class="active"></li>
<li data-target="#bevog-image-2" data-slide-to="1"></li>
<li data-target="#bevog-image-3" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active" id="bevog-image-1">
<img src="img/bevog_gallery_01.jpg" alt="Bevog gallery picture title">
</div>
<div class="item" id="bevog-image-2">
<img src="img/bevog_gallery_01.jpg" alt="Bevog gallery picture title">
</div>
<div class="item" id="bevog-image-3">
<img src="img/bevog_gallery_01.jpg" alt="Bevog gallery picture title">
</div>
</div>
<a class="left carousel-control" data-slide="prev" href="#"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#"><span class="icon-next"></span></a>
</div>
旋转木马链接的锚定标记需要有一个指向旋转木马id的href
旋转木马未加载时,我也遇到了同样的问题。我从加载小型版本的引导程序切换到完整版本,然后它工作了。Me认为mini有点不太对劲。我的指示灯也有类似的问题(不工作)。
对于指标,您可以将其添加到JS…这将手动为指标设置相同的功能:
$('.carousel-indicators li').click(function(e){
e.stopPropagation();
var goTo = $(this).data('slide-to');
$('.carousel-inner .item').each(function(index){
if($(this).data('id') == goTo){
goTo = index;
return false;
}
});
$('#gallery-carousel').carousel(goTo);
});
复制粘贴的危险
在浪费了几个小时让控件工作之后,我发现我的代码在导航栏中还有一个转盘,具有相同的ID#myCarousel
以防有人面临同样的问题 在您的旋转木马右侧和左侧控件中,用数据目标替换每个href属性。在您初始化旋转木马的地方张贴代码,并用代码更新htmlquestion在上述代码中唯一需要修复的是数据目标。所有的数据目标需要是“画廊旋转木马”。你应该详细说明你的答案,并解释他们。谢谢!这是完美的工作,没有更恼人的改变网址
$('.carousel-indicators li').click(function(e){
e.stopPropagation();
var goTo = $(this).data('slide-to');
$('.carousel-inner .item').each(function(index){
if($(this).data('id') == goTo){
goTo = index;
return false;
}
});
$('#gallery-carousel').carousel(goTo);
});
$('.carousel-control').click(function(e){
e.stopPropagation();
var goTo = $(this).data('slide');
if(goTo=="prev") {
$('#carousel-id').carousel('prev');
} else {
$('#carousel-id').carousel('next');
}
});