使用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.
轮播指示符类也为空，将由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();
});
基本上，您将所有图像附加到内部轮播类，添加轮播控件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屋！
