使用 jQuery 将幻灯片动态添加到 Bootstrap 3 轮播 [英] Add slides to Bootstrap 3 carousel dynamically using jQuery
问题描述
我正在尝试使用 jQuery 将幻灯片添加到 Bootstrap 轮播，但它没有充当浏览器中的滑块.相反，它在列表视图中显示图像.
I'm trying to add slides to Bootstrap carousel using jQuery but it is not acting as a slider in the browser. Instead it's showing the images in list view.
<!DOCTYPE html>
<html>
<head>
<link href="Assets/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="Assets/js/bootstrap.min.js"></script>
<title></title>
<script>
onload=function(){
for(var m=3;m>=0;m--)
{
var path="file_uploads/"+m+".jpg";
$(".carousel-indicators").after("<li data-target='#carousel-example-generic' data-slide-to=""+m+""></li>");
$(".carousel-inner").after("<div class='item'><img src='"+path+"' alt='"+m+"'></div>");
}
$(".carousel-indicators li:first").addClass("active");
$(".carousel-inner .item:first").addClass("active");
$('.carousel').carousel();
}
</script>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</body>
</html>
推荐答案
首先，我将依赖 m 是一个数组，其中包含正确的图像 url.
First thing, I will rely on the fact that m is an array with proper url to your images.
HTML 应该是这样的:
The HTML should be like this:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators"></ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"></div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
类轮播内部是空的，您可以在其中放置图像以供轮播.
Class carousel inner is empty, there is where you gonna place your images for then carousel.
class carousel-indicatiors 也是空的，将由 JS 填充.
Class carousel-indicatiors is also empty, will be filled by JS.
然后，JS来了:(正如我所说，我依赖于 m 是一个 imgs url 数组的事实)
Then, comes the JS: (as I said, Im relying on the fact that m is an array of imgs url)
$(document).ready(function(){
for(var i=0 ; i< m.length ; i++) {
$('<div class="item"><img src="'+m[i]+'"><div class="carousel-caption"></div> </div>').appendTo('.carousel-inner');
$('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"></li>').appendTo('.carousel-indicators')
}
$('.item').first().addClass('active');
$('.carousel-indicators > li').first().addClass('active');
$('#carousel-example-generic').carousel();
});
基本上，您将所有图像附加到类 carousel-inner，添加轮播控件 li，然后将活动类添加到第一个图像和第一个轮播指示器 li.最后，初始化轮播.请注意，所有这些都在文档就绪函数中，这是您所缺少的.你所做的只是定义一个名为 onload 的函数
Basically, you append all your images to class carousel-inner, you add carousel control li's, then you add the active class to the first image and to the first carousel indicator li., and finally, you initialize your carousel. Note that all this is inside a document ready function, which is what you are missing. What you do is only define a function called onload
希望对你有帮助！
我看到您还向图像输出了 alt 标记，但我的答案不需要这些，我敢打赌您可以毫无问题地做到这一点.
I saw that you are outputting also alt tag to images, but thats something that not need to be on my answer, I bet you can do that without problems.
这篇关于使用 jQuery 将幻灯片动态添加到 Bootstrap 3 轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
