带有动态项目的Bootstrap Carousel不会滑动

我正在使用股票引导转盘：

 
 
 
 
 .... 
 
 
 
  

通过单击旋转木马内的锚标签，将新的.item注入.carousel-inner 。 在注入.item （工作正常）之后，旋转木马应该滑到那个.item 。 然而，没有任何反应。

 
 
 
 
 
 .... 
 
 
 
 
 
 .... 
 
 
 
 
 
 .... 
 
 
 
  

即使我使用$("#main-navigation-carousel").carousel(1); 在浏览器控制台中没有任何反应 如果我在服务器上的代码中添加项目一切正常。

Answer 1

删除轮播数据然后再次触发它就可以完成这项工作！

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

由于旋转木马不应自动滑动，因此使用.carousel("pause").removeData() 。

Answer 2

试试这个 ：

 //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 += '
'; content_inner += '
'; }); $('#car_id').html(content_indi); $('#car_inner').html(content_inner); $('#car_inner .item').first().addClass('active'); $('#car_indi > li').first().addClass('active'); $('#myCarousel').carousel(); }); 

Answer 3

如在http://bootply.com/83370中 ，您的旋转木马有class级.carousel

 $('.carousel').carousel({interval:false}); $('.carousel-inner').append('
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
'); $('.carousel-indicators li').removeClass('active'); $('.carousel-indicators').append('
'); $('.carousel').carousel('next'); 

Answer 4

试试这段代码：

 //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 += '
'; content_inner += '
'; }); $('#car_id').html(content_indi); $('#car_inner').html(content_inner); $('#car_inner .item').first().addClass('active'); $('#car_indi > li').first().addClass('active'); $('#myCarousel').carousel(); });