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

时间：2015-04-08 10:11:39

标签： jquery twitter-bootstrap twitter-bootstrap-3

我正在按照这个答案来开发一个缩略图，该缩略图应该显示缩略图列表，如果用户点击每个缩略图，它会在灯箱中显示该图像，但旋转木马根本不起作用。

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

Demo 

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

我看到的输出在下面，它不移动，箭头不起作用！

enter image description here

2 个答案:

答案 0 :(得分：1)

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

这是我制作的小提琴：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));
  }
});

答案 1 :(得分：1)

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

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

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

下面是我在HTML文件中使用的代码并在本地运行，一切都运行良好。我所做的唯一更改是将脚本移动到正文下方并将外部资源更新为最新的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>

请告诉我这是否适合您。

编辑：添加了本地页面的屏幕截图，没有控制台错误。 enter image description here

相关问题
最新问题