Bootstrap 3 走马灯控制和指示器链接无法正常工作

Question

我正在思考为什么我的页面上引导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>      

- Primoz Rome

---

请发布您初始化走马灯的代码和HTML。 - Eugen Halca

问题已更新，附带代码。 - Primoz Rome

以上代码中唯一需要修复的是 data-target。所有的 data-target 都需要改为 "gallery-carousel"。 - MsBugKiller

Answer 1

轮播图链接的锚标签需要具有指向轮播图id的href。 查看Bootstrap文档。

<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>

- DigTheDoug

Answer 2

我在指示器（不工作）方面遇到了类似的问题。 对于指示灯，您可以将此代码添加到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); 
    });

- Chirag Mishra

---

你应该更详细地阐述你的答案并加以解释。 - avcajaraville

Answer 3

$('.carousel-control').click(function(e){
    e.stopPropagation();
    var goTo = $(this).data('slide');
    if(goTo=="prev") {
        $('#carousel-id').carousel('prev'); 
    } else {
        $('#carousel-id').carousel('next'); 
    }
});

- Sólon

Answer 4

复制粘贴的危险。

在花费了几个小时让控件起作用之后，我发现我的代码在导航栏中有另一个带有相同 ID #myCarousel 的轮播图。

以防某些人遇到相同的问题。

- bhaskarc

Answer 5

在您的走马灯左右控制中，将每个href属性替换为data-target。

- Dejazmach

---

谢谢！那个完美地解决了问题，不再出现烦人的URL更改。 - JSEvgeny

Answer 6

我也遇到了轮播图无法加载的问题。我从加载压缩版的 Bootstrap 切换到完整版，然后它就可以工作了。我认为迷你版中有些东西不太对。

- Dawn