idr*_*fer 25 jquery slider carousel twitter-bootstrap-3
我正在尝试使用jQuery向Bootstrap轮播添加幻灯片,但它并不是浏览器中的滑块.相反,它在列表视图中显示图像.
<!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>
avc*_*lle 38
首先,我将依赖于m是一个具有适当URL的数组的事实.
HTML应该是这样的:
<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>
类旋转木马内部是空的,您可以在那里放置您的图像然后旋转木马.
类旋转木马指示器也是空的,将由JS填充.
然后,来了JS :(正如我所说,我依赖于m是一个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的函数
希望能帮助到你 !
编辑:我看到你也输出了alt标签到图像,但那不需要我的答案,我打赌你可以做到这一点没有问题.