8

我在摸不着头脑，为什么 Bootstrap 3 轮播控件（和指示器）链接在我的页面上不起作用。这是一个简单的文档复制粘贴 + 一些 CSS 定制。代码可以在这里查看http://bevog.si.bitcloud.nine.ch/ (#gallery)。

更新：

轮播初始化代码

/* 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>
4

6 回答 6

20

轮播链接的锚标签需要有一个指向轮播 id 的 href。请参阅引导文档。

<a class="left carousel-control" data-slide="prev" href="#gallery-carousel"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#gallery-carousel"><span class="icon-next"></span></a>
于 2013-10-01T18:20:25.547 回答
8

我对指标也有类似的问题（不工作）。对于指标，您可以将其添加到您的 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); 
    });
于 2015-06-17T10:38:38.647 回答
4 
$('.carousel-control').click(function(e){
    e.stopPropagation();
    var goTo = $(this).data('slide');
    if(goTo=="prev") {
        $('#carousel-id').carousel('prev'); 
    } else {
        $('#carousel-id').carousel('next'); 
    }
});
于 2015-06-19T12:15:27.867 回答
3

复制粘贴的危险。

在浪费了几个小时让控件工作之后，我发现我的代码在导航栏中还有另一个具有相同 ID 的轮播#myCarousel

以防万一有人面临同样的问题。

于 2016-05-25T09:59:44.163 回答
3

将轮播左右控件中的每个 href 属性替换为 data-target 。

于 2016-12-05T08:22:52.007 回答
1

我也遇到了同样的问题，轮播没有加载。我从加载 bootstrap 的缩小版本切换到完整版本，然后它工作了。我认为mini中有些东西不太对劲。

于 2013-11-21T20:37:53.113 回答