jQuery 带有动态项目的 Bootstrap Carousel 不会滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19029224/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-26 23:04:10 来源:igfitidea点击:
Bootstrap Carousel with dynamic items does not slide
提问by Andre Zimpel
I'm using the stock bootstrap carousel:
我正在使用股票引导轮播：
<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>
By clicking on an anchor tag inside the carousel a new .itemis injected to the .carousel-inner. After the .itemis injected (which works fine) the carousel should slide to that .item. However, nothing happens.
通过点击旋转木马内的锚标签，一个新的.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>
Even if I use $("#main-navigation-carousel").carousel(1);in the browser console nothing happens. If I add items right in the code on the server everything works fine.
即使我$("#main-navigation-carousel").carousel(1);在浏览器控制台中使用，也没有任何反应。如果我在服务器上的代码中添加项目，一切正常。
回答by Andre Zimpel
Removing the carousel data and then triggering it again does the job!
删除轮播数据然后再次触发它就可以了！
$("#main-navigation-carousel").carousel("pause").removeData();
$("#main-navigation-carousel").carousel(target_slide_index);
Since the carousel should not auto slide it is important to use .carousel("pause").removeData().
由于轮播不应自动滑动，因此使用.carousel("pause").removeData().
回答by bayu
Try this :
尝试这个 ：
<!-- 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('/images/' + obj.img_filename + '') 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();
});
回答by Bass Jobsen
as in http://bootply.com/83370with your carousel having class .carousel
就像在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');
回答by Nupur
Try this code:
试试这个代码：
//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('/images/' + obj.img_filename + '') 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();
});
回答by gal007
Remove the .active class from all the items:
从所有项目中删除 .active 类：
$('.item').removeClass('active');
And then move the active class to the item that you just created with the anchor. E.g.:
然后将活动类移动到您刚刚使用锚点创建的项目。例如：
$('.carousel-inner').append(`<div class="item active">...</div>`);
This works at least for Bootstrap 4: https://jsfiddle.net/gal007/kt3jLopz/20/
这至少适用于 Bootstrap 4：https: //jsfiddle.net/gal007/kt3jLopz/20/
