[英]Bootstrap carousel images not loaded
變得瘋狂:D被困了三天。
我正在嘗試在我的頁面中放置一個旋轉木馬,我正在加載位於我的機器中的圖像,每個圖像的大小為1200 * 480。 當我測試它時,圖像不會顯示。 這是代碼:
<div class="jumbotron">
<h1>Kurt Angle</h1>
<p>Olympic Gold Medalist, World Champion, Hall of Famer, Living Legend</p></div>
<!--CAROUSEL BEGINES-->
<div class="fluid-container">
<div class="carousel slide"
data ride="carousel"
id="carousel">
<!--indicators--->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!--wrapper of the images(itmes)--->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="Pictures/angle_olympics_croppedxcf.jpg" alt="slide1">
</div>
<div class="item">
<img src="file:///home/davide/Pictures/angle%20cropped%202.jpg"
alt="slide2">
</div>
<div class="item">
<img src="file:///home/davide/Pictures/kurt_angle_cropped_3.jpg"
alt="slide3">
</div>
</div>
<!--now let's put right and left control-->
<a class="left carousel-control"
href="#carousel"
role="button"
data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
CSS:
.jumbotron{
background-color: #241f14 !important;
color: #ffffff;
}
.carousel .item{
height: 100%;
}
你能幫幫我嗎?
試試這個:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://media.istockphoto.com/photos/overhead-view-of-two-business-persons-in-the-lobby-picture-id520791880?s=2048x2048" alt="Image">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="http://media.istockphoto.com/photos/friends-connection-digital-devices-technology-network-concept-picture-id525208898?s=2048x2048" alt="Image">
<div class="carousel-caption">
<h3>Lorem</h3>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.