引导轮播不显示指标和列表不起作用答案

【问题标题】：Bootstrap Carousel not displaying indicators and list not working引导轮播不显示指标和列表不起作用
【发布时间】：2014-02-14 06:05:54
【问题描述】：

我正在使用引导轮播 (* bootstrap-carousel.js v2.2.2)。问题是，包含轮播指示器的“ol”样式不起作用。当我手动将样式添加到它正在显示的 css 文件中时，但当 .active 类从幻灯片更改为幻灯片时，它似乎没有改变。

我的代码是：

<div id="HomeCarousel" class="carousel slide">

  <ol class="carousel-indicators">
    <li id="homecar1" data-target="#HomeCarousel" data-slide-to="0" class="active"></li>
    <li id="homecar2" data-target="#HomeCarousel" data-slide-to="1"></li>
    <li id="homecar3" data-target="#HomeCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item"><img src="<?php bloginfo('template_url'); ?>/images/home/home_carousel1.jpg" height="506px" /> </div>
    <div class="item"><img src="<?php bloginfo('template_url'); ?>/images/home/home_carousel2.jpg" /></div>
    <div class="item"><img src="<?php bloginfo('template_url'); ?>/images/home/home_carousel3.jpg" /></div>
  </div>

</div>

所以 jquery 似乎也不能很好地工作.. 但是幻灯片可以工作，并且当我添加它时 prev/next 也可以..

【问题讨论】：

你能提供一个 JSFiddle 和一些工作代码吗？您的标记看起来不错，因此如果没有更多代码示例，就无法判断问题所在。

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

我真的很想添加一些 JSFiddle，但除了默认的 bootstrap.js 和样式表之外没有更多的东西。我从下载的 bootstrap css 2.3 文件中添加了指标样式并使用 id 来设置活动指标。我手动添加了以下js：

jQuery(document).ready(function($) {
          $( "#HomeCarousel li#ind-homecar0" ).click(function() {
            $( '#HomeCarousel' ).carousel(0);
            });
          $( "#HomeCarousel li#ind-homecar1" ).click(function() {
            $( '#HomeCarousel' ).carousel(1);
            });
          $( "#HomeCarousel li#ind-homecar2" ).click(function() {
            $( '#HomeCarousel' ).carousel(2);
            });

          $('#HomeCarousel.carousel').on('slid', function() {
            var to_slide = $('#HomeCarousel .carousel-inner .item.active').attr('id');
            $('#HomeCarousel .carousel-indicators').children().removeClass('active');
            $('#HomeCarousel .carousel-indicators [id=ind-' + to_slide + ']').addClass('active');
          });

          });

【讨论】：