Question

我有Bootstrap Carousel，如下所示

<div class="carousel slide multi-item-carousel" id="theCarousel3">
                <div class="carousel-inner">
                  <div class="item active">
                    <div class="col-lg-4">
                      <img src='images/image1.jpg' id='img' class='img-responsive' width='250' height='300' />
                    </div>
                  </div>
                  <div class="item">
                    <div class="col-lg-4">
                      <img src='images/image2.jpg' id='img' class='img-responsive' width='250' height='300' />
                    </div>
                  </div>
                  <div class="item">
                    <div class="col-lg-4">
                      <img src='images/image3.jpg' id='img' class='img-responsive' width='250' height='300' />
                    </div>
                  </div>
                </div>
                <a class="left carousel-control" href="#theCarousel" data-slide="prev"></a>
                <a class="right carousel-control" href="#theCarousel" data-slide="next"></a>
              </div>

它工作正常，但是当我通过附加相同的html块添加jQuery图像时，如下所示它不再起作用了：

$('#myContent').append("<div class='carousel slide multi-item-carousel' id='theCarousel3'><div class='carousel-inner'>");

  for(var x = 0; x < imageCount; x++) {
    var imgElement = "<div class='item'><div class='col-lg-4'><img src='"
                      + pictures[x].path + "' id='img" + x +
                      "' class='img-responsive' width='250' height='300' /></div></div>";
    
    $('#myContent').append(imgElement);
    if(x == 0) $('#theCarousel3 .item').addClass('active');
  }

  $('#myContent').append("</div><a class='left carousel-control' href='#theCarousel3' data-slide='prev'></a><a class='right carousel-control' href='#theCarousel3' data-slide='next'></a></div>");

我甚至为第一个项目添加了活动类，在我看来这可能是一个问题，但仍然无法正常工作，我看到的是逐个添加但不滑动的图像。这可能是什么问题，请帮忙吗？感谢。

Answer 1

您需要将图像添加到与其他图像相同的DOM元素中。

而不是$('#myContent').append(imgElement);它应该是

$('#theCarousel3 .carousel-inner').eq(0).append(imageElement);

您可能可以摆脱eq(0)部分，但我不确定这是否可行，因为类选择器是多个。

另一个选项是将myContent id添加到carousel-inner元素

你也没有像创建旋转木马那样创建有效的HTML

试试这个：

＆＃13;

$(function() {
  var imgElement,
    pictures = [
      'https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png',
      'https://lh3.googleusercontent.com/Rz-Ob1uRO2Xch40qHYgxpZitc3vZzxjeeSHVaNazn4dUny-AqGK0hLXUxhTpg4qgATP6VdlvZPYv_o0=s559-no',
      'http://blog.suite-logique.fr/wp-content/uploads/2014/01/G7N0lnxM.jpeg',
      'http://inspiratron.org/wp-content/uploads/2014/07/google-hummingbird.jpg'
    ]
    wrapper = $('#myContent'),
    carousel = $('<div/>', {
      id: "theCarousel3",
      "class": "carousel slide multi-item-carousel",
      append: '<div class="carousel-inner"></div><a class="left carousel-control" href="#theCarousel3" data-slide="prev"></a><a class="right carousel-control" href="#theCarousel3" data-slide="next"></a>'
    }),
    carouselInner = carousel.find('.carousel-inner').eq(0);

  wrapper.append(carousel);
  carousel.carousel();
  for (var i = 0; i < pictures.length; i++) {
    imgElement = $('<div/>', {
      "class": "item" + (i ? '' : ' active'),
      append: $('<div/>', {
        "class": 'col-lg-4',
        append: $('<img/>', {
          src: pictures[i],
          id: 'img' + i,
          "class": 'img-responsive',
          height: 300
        })
      })
    })
    carouselInner.append(imgElement);
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div id='myContent'></div>
</div>

＆＃13;

Answer 2

注意：Frist div有'item'和'active'类，而所有其他div只有'item'类，那么它将起作用，否则它将无效。

             <div class="item active">
                <div class="col-lg-4">
                  <img src='images/image1.jpg' id='img' class='img-responsive' width='250' height='300' />
                </div>
              </div>
              <div class="item">
                <div class="col-lg-4">
                  <img src='images/image2.jpg' id='img' class='img-responsive' width='250' height='300' />
                </div>
              </div>
              <div class="item">
                <div class="col-lg-4">
                  <img src='images/image3.jpg' id='img' class='img-responsive' width='250' height='300' />
                </div>

它为我工作，希望它也适合你。谢谢!!!!!!!!

使用jQuery动态添加项目后，Bootstrap Carousel无法正常工作

2 个答案: