8

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

一切正常，除了轮播指示器（'.carousel-indicators'）没有与幻灯片一起循环。

这是一个完全精简的页面：

<!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上的示例完全相同。关于为什么他们不会滑动的任何想法？

4

4 回答 4

14

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

于 2013-02-12T21:15:27.170 回答
7

我无法让我的工作（不知道发生了什么），但这是我让它看起来像这样的方式：

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>

干杯!

于 2013-03-20T18:24:20.027 回答
5

这里是

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

希望对你有帮助

于 2013-03-25T13:10:55.257 回答
0

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

于 2014-06-11T17:49:24.790 回答