logo标签列表

Bootstrap轮播：指示器未循环

javascripttwitter-bootstrapcarousel
8
我正在尝试实现Bootstrap的轮播组件。除了幻灯片指示器（'.carousel-indicators'）没有随着幻灯片循环之外，一切都正常工作。
这是一个完全简化的页面链接：http://dev.magzalez.com/bootstrap-question.html 
<!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上示例的完全复制。 有什么想法，为什么它们不会滑动？

如果您在旋转木马滑动时检查指示器，是否会在LI元素中出现并消失活动类？ - Billy Moat
检查元素时没有任何移动指示。您可以使用http://dev.magzalez.com/bootstrap-questions.html查看示例的实时版本。 - magzalez
1
啊，你的链接错了，应该是http://dev.magzalez.com/bootstrap-question.html（question后面没有's'）。 - Billy Moat
我认为你的Bootstrap CSS文件中没有包含处理走马灯指示器的代码。这是一个旧的CSS文件吗？尝试更新到最新版本，因为走马灯指示器仅在上周发布的2.3版Bootstrap中添加。 - Billy Moat
1
你可能还需要更新你的Bootstrap JavaScript文件。 - Billy Moat
显示剩余2条评论
4个回答
14

更新您的 Bootstrap CSS 文件和 JavaScript 文件至最新版本。

2
看起来在我上周开始项目和现在之间有更新。谢谢！ - magzalez
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>

Cheers!

我不知道为什么我的轮播图不起作用，但手动添加上述内容确实解决了我的问题。 - David
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>

希望这能对您有所帮助

FonkyJu，这看起来像是个好的解决方法！而且它可行。谢谢。 - Anton Shchastnyi
0

我曾经遇到过同样的问题，只需从/js文件夹中删除bootstrap-carousel.js文件即可解决！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接