Question

我正在尝试从Bootstrap实现轮播。

除了旋转木马指示器（'.carousel-indicators'）没有在幻灯片中循环播放外，一切正常。

Here is a completely stripped down page：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<meta name="description" content="">
<title>Test Home Page</title>
<link href="http://s3.amazonaws.com/stockpr-test-store/esph2/files/css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
    li.active {
        color:red;
    }
</style>
</head>
<body>
    <div class="container">
    <h1>Test</h1>
        <div id="myCarousel" class="carousel slide">
            <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>
            </ol>
            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="active item"><img src="http://dummyimage.com/960x500/fff/000" alt="Slide 1"></div>
                <div class="item"><img src="http://dummyimage.com/960x500/fff/000" alt="Slide 2"></div>
                <div class="item"><img src="http://dummyimage.com/960x500/fff/000" alt="Slide 3"></div>
            </div>
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
    </div><!--//container-->

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://s3.amazonaws.com/stockpr-test-store/esph2/files/js/bootstrap.min.js"></script>
<script>
$('.carousel').carousel();
</script>
</body>

这几乎与http://twitter.github.com/bootstrap/javascript.html#carousel上的示例完全相同。关于他们为什么不滑动的任何想法？

Answer 1

将您的Bootstrap css文件和JavaScript文件更新为最新版本。

Answer 2

我无法让我的工作（不知道发生了什么）但是这就是我的看法：

HTML

<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="myCarousel-target active"></li>
        <li data-target="#myCarousel" data-slide-to="1" class="myCarousel-target"></li>
        <li data-target="#myCarousel" data-slide-to="2" class="myCarousel-target"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div data-slide-no="0" class="item carousel-item active"><img src="http://dummyimage.com/960x500/fff/000" alt="Slide 1"></div>
        <div data-slide-no="1" class="item carousel-item"><img src="http://dummyimage.com/960x500/fff/000" alt="Slide 2"></div>
        <div data-slide-no="2" class="item carousel-item"><img src="http://dummyimage.com/960x500/fff/000" alt="Slide 3"></div>
    </div>
</div>

的JavaScript

<script type="text/javascript">
    $(function() {
        $('#myCarousel').carousel({interval: 2000});
        $('#myCarousel').on('slid', function() {
            var to_slide = $('.carousel-item.active').attr('data-slide-no');
            $('.myCarousel-target.active').removeClass('active');
            $('.carousel-indicators [data-slide-to=' + to_slide + ']').addClass('active');
        });
        $('.myCarousel-target').on('click', function() {
            $('#myCarousel').carousel(parseInt($(this).attr('data-slide-to')));
            $('.myCarousel-target.active').removeClass('active');
            $(this).addClass('active');
        });
    });
</script>

干杯！

Answer 3

这是

<div id="myCarousel" class="carousel slide">
          <!-- Carousel items -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
          </ol>
          <div class="carousel-inner">
              <div id="0" class="item active">
                <img src="image/snow1.jpg" alt="">
                <div class="carousel-caption">
                  <h4>First Thumbnail label</h4>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </div>
              <div id="1" class="item">
                <img src="image/snow2.jpg" alt="">
                <div class="carousel-caption">
                  <h4>Second Thumbnail label</h4>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </div>
          </div> 
          <!-- Carousel nav -->

          <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
          <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

    </div>
<script>
$(document).ready(function() {
  $('.carousel').carousel();
  $('.carousel').on('slid', function() {
    var to_slide = $('.carousel-inner .item.active').attr('id');
    $('.carousel-indicators').children().removeClass('active');
    $('.carousel-indicators [data-slide-to=' + to_slide + ']').addClass('active');
  });
});
</script>

希望它能帮到你

Answer 4

我遇到了同样的问题，只是从/ js文件夹中删除bootstrap-carousel.js解决了这个问题！

Bootstrap Carousel：指示器不骑车

4 个答案:

HTML

的JavaScript