我想要一个完整的图像滑块。我查看chrome并找到图像,脚本中没有错误。但图像没有显示。这是一个黑屏。
我有这个:
@section Styles {
<link href="@Url.Content("~/Content/FullImageSlider.css")" rel="stylesheet" type="text/css" />
}
@section scripts{
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
}
<div class="container fill">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<div class="fill" style="background-image:url('../../Images/VeryLarge.JPG');">
<div class="container">
</div>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('../../Images/road.JPG');">
<div class="container">
</div>
</div>
</div>
</div>
<div class="pull-center">
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
这是我的css:
html,body{height:100%;}
.carousel,.item,.active{height:100%;}
.carousel-inner{height:100%;}
.fill{width:100%;height:100%;background-position:center;background-size:cover;}
/* faster sliding speed */
.carousel-inner > .item {
-webkit-transition: 0.3s ease-in-out left;
-moz-transition: 0.3s ease-in-out left;
-o-transition: 0.3s ease-in-out left;
transition: 0.3s ease-in-out left;
}
/* keep full widget on smaller screens */
@media (max-width: 767px) {
body {
padding-left: 0;
padding-right: 0;
}
}
谢谢