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 回答
3

尝试这个 ：

<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators" id="car_id"></ol>
    <div class="carousel-inner" id="car_inner"></div>
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->


//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();
    });

于 2015-05-04T13:52:57.767 回答
1

就像在http://bootply.com/83370一样，你的轮播有课.carousel

$('.carousel').carousel({interval:false});
$('.carousel-inner').append('<div class="item"><img data-src="holder.js/900x500/auto/#555:#5555" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAH0CAYAAABl8+PTAAALGklEQVR4nO3XIQEAMAzAsJmcfym/jIEGhJd2dvcBAADQM9cBAAAA3DCEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAg6gMgubGT543s8gAAAABJRU5ErkJggg==" alt="900x500"><div class="carousel-caption"><h3>Third slide label</h3><p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p></div></div>');
$('.carousel-indicators li').removeClass('active');
$('.carousel-indicators').append('<li data-target="#carousel-example-captions" data-slide-to="1" class="active"></li>');
$('.carousel').carousel('next');
于 2013-09-27T06:50:30.150 回答
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 回答
0

从所有项目中删除 .active 类：

$('.item').removeClass('active');

然后将活动类移动到您刚刚使用锚创建的项目。例如：

$('.carousel-inner').append(`<div class="item active">...</div>`);

这至少适用于 Bootstrap 4： https ://jsfiddle.net/gal007/kt3jLopz/20/

于 2019-05-15T13:30:04.543 回答