13

ストックブートストラップカルーセルを使用しています：

<div id="main-navigation-carousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="item active" data-id="0">
      <ul>
        <li><a></a></li>
        ....
        <li><a></a></li>
      </ul>
    </div>
  </div>
</div>

カルーセル内のアンカー タグをクリックすると、新しい.itemが に挿入されます.carousel-inner。が注入された後.item(正常に動作します)、カルーセルはそれにスライドするはずです.item。しかし、何も起こりません。

<div id="main-navigation-carousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="item active" data-id="0">
      <ul>
        <li><a></a></li>
        ....
        <li><a></a></li>
      </ul>
    </div>
    <div class="item" data-id="1">
      <ul>
        <li><a></a></li>
        ....
        <li><a></a></li>
      </ul>
    </div>
    <div class="item" data-id="2">
      <ul>
        <li><a></a></li>
        ....
        <li><a></a></li>
      </ul>
    </div>
  </div>
</div>

$("#main-navigation-carousel").carousel(1);ブラウザコンソールで使用しても何も起こりません。サーバー上のコードにアイテムを追加すると、すべて正常に動作します。

4

5 に答える 5

21

カルーセル データを削除してから再度トリガーすると、うまくいきます。

$("#main-navigation-carousel").carousel("pause").removeData();
$("#main-navigation-carousel").carousel(target_slide_index);

カルーセルは自動スライドすべきではないため、使用することが重要.carousel("pause").removeData()です。

于 2013-09-26T14:02:13.287 に答える
0

このコードを試してください：

//json data result = [{"id_img": 17,"img_filename": "ca0d8455-2702-4560-a444847429e36670.jpg"},{"id_img": 18,"img_filename": "eb0c6c77-fbd7-4f2c-bf22-10c874eefbf6.jpeg"},{"id_img": 19,"img_filename": "e7568c87-babb-4049-aed6-27b97866a817.png"}]
    var x = $.getJSON('../Json/GetImage', function (data) {
      $("#myCarousel").carousel("pause").removeData();
      var content_indi = "";
      var content_inner = "";
      $.each(data, function (i, obj) {
        content_indi += '<li data-target="#myCarousel" data-slide-to="' + i + '"></li>';
        content_inner += '<div class="item" style="background:url(&#39/images/' + obj.img_filename + '&#39) no-repeat center center;background-size: cover"></div>';
      });
      $('#car_id').html(content_indi);
      $('#car_inner').html(content_inner);
      $('#car_inner .item').first().addClass('active');
      $('#car_indi > li').first().addClass('active');
      $('#myCarousel').carousel();
    });

于 2016-06-28T12:09:35.473 に答える