缩略图轮播在 bootstrap-3 上不起作用

Question

我正在按照这个答案开发一个应该显示缩略图列表的缩略图，如果用户单击每个缩略图，它会在灯箱中显示该图像，但是，轮播根本不起作用。

有没有人有更好的解决方案或可能知道这个问题？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script>
  $('#myCarousel').carousel({
  interval: 4000
})

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  for (var i=0;i<2;i++) {
    next=next.next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }

    next.children(':first-child').clone().appendTo($(this));
  }
});
  </script>
  <style>
  .carousel-inner .active.left { left: -25%; }
.carousel-inner .next        { left:  25%; }
.carousel-inner .prev    { left: -25%; }
.carousel-control        { width:  4%; }
.carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;}
  </style>
</head>
<body>


  <div class="container">
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" id="myCarousel">
  <div class="carousel-inner">
    <div class="item active">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e477e4/fff&amp;text=2" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f566f5/333&amp;text=5" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=8" class="img-responsive"></a></div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>

   </div>
</body>
</html>

按照第一个答案的建议，我创建了以下文件，但这段代码有同样的问题

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script
  src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  <script>
$('#myCarousel').carousel({
  interval: 4000
});

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  for (var i=0;i<2;i++) {
    next=next.next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }

    next.children(':first-child').clone().appendTo($(this));
  }
});


  </script>
  <style>
  .carousel-inner .active.left { left: -25%; }
.carousel-inner .next        { left:  25%; }
.carousel-inner .prev    { left: -25%; }
.carousel-control        { width:  4%; }
.carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;}
  </style>
</head>
<body>

 <div class="container">
<div class="col-md-9 col-md-offset-3">
<div class="carousel slide" id="myCarousel">
  <div class="carousel-inner">
    <div class="item active">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f566f5/333&amp;text=5" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=8" class="img-responsive"></a></div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>

   </div>
</body>
</html>

我看到的输出如下，它没有移动，箭头也不起作用！

Answer 1

我把你的代码放在 js 中fiddle，它似乎工作正常。
问题可能出在您使用的外部资源上。

这是我制作的fiddle：DEMO

$('#myCarousel').carousel({
  interval: 4000
});

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  for (var i=0;i<2;i++) {
    next=next.next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }

    next.children(':first-child').clone().appendTo($(this));
  }
});

Answer 2

工作解决方案：
首先，我只建议您尝试遵循惯例，并在 header 和文档末尾的所有脚本中使用任何样式的所有链接，在 body 之后但在结束之前html 标签。这样，在加载所有脚本和运行之前，您的内容加载速度会更快。

此外，您用于页面的 JQuery 是 v1.11.1，它已经很旧了。我建议始终检查所有外部资源的最新版本并确保它们是最新版本。 JQuery 的最新版本是当前 v2.1.4，我强烈建议您将它用于您正在使用的任何近期即将进行的项目。请注意 JQuery 在 Boostrap JS 之前加载，因为它依赖于 JQuery.

最后，我用 $(document).ready(function() { 包裹了你的 Javascript/JQuery 以确保它在文档完全加载并准备好你想调用的任何 JQuery/Javascript 函数后运行.

下面是我在 HTML 文件和本地运行中使用的代码，一切都运行良好。我所做的唯一更改是将脚本移至 body 下方并将您的外部资源更新为最新的 JQuery。此外，格式化您的代码以获得更好的可读性

 <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">  

            <style>
                .carousel-inner .active.left { left: -25%; }
                .carousel-inner .next        { left:  25%; }
                .carousel-inner .prev    { left: -25%; }
                .carousel-control        { width:  4%; }
                .carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;}
            </style> 
        </head>

        <body>
            <div class="container">
                <div class="col-md-9 col-md-offset-3">
                    <div class="carousel slide" id="myCarousel">
                        <div class="carousel-inner">
                            <div class="item active">
                                <div class="col-xs-3">
                                    <a href="#">
                                        <img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive">
                                    </a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-xs-3">
                                    <a href="#">
                                        <img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive">
                                    </a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-xs-3">
                                    <a href="#">
                                        <img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive">
                                    </a>
                                    </div>
                            </div>
                            <div class="item">
                                <div class="col-xs-3">
                                    <a href="#">
                                        <img src="http://placehold.it/500/f566f5/333&amp;text=5" class="img-responsive">
                                    </a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-xs-3">
                                    <a href="#">
                                        <img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive">
                                    </a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-xs-3">
                                    <a href="#">
                                        <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
                                    </a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-xs-3">
                                    <a href="#">
                                        <img src="http://placehold.it/500/fcfcfc/333&amp;text=8" class="img-responsive">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                            <i class="glyphicon glyphicon-chevron-left"></i>
                        </a>
                        <a class="right carousel-control" href="#myCarousel" data-slide="next">
                            <i class="glyphicon glyphicon-chevron-right"></i>
                        </a>
                    </div>    
            </div>
        </div>
    </body>
    <script src=" https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script>
    $(document).ready(function() {
        $('#myCarousel').carousel({
            interval: 4000
        });

        $('.carousel .item').each(function(){
            var next = $(this).next();
            if (!next.length) {
                next = $(this).siblings(':first');
            }
            next.children(':first-child').clone().appendTo($(this));

            for (var i=0;i<2;i++) {
                next=next.next();
                if (!next.length) {
                    next = $(this).siblings(':first');
                }

                next.children(':first-child').clone().appendTo($(this));
            }
        });
    });
    </script>
</html>

让我知道这是否也适合你。

编辑： 添加了在本地运行且没有控制台错误的页面屏幕截图。

缩略图轮播在 bootstrap-3 上不起作用

Thumbnail carousel does not work on bootstrap-3

jquery

twitter-bootstrap

twitter-bootstrap-3