<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/stylesheet.css">
<title>Gallery</title>
</head>
<body>
<header id="container-fluid">
<hgroup>
<h1> <a href="index.html" title="Love Forever"><span class="header1">True Love Endures Forever</span> </h1>
</hgroup>
</header>
<nav class="navbar navbar-default">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="About Us.html">About Us</a></li>
<li><a href="Contact Us.html">Contact us</a></li>
</ul>
</nav >
<section class="container-fluid">
<article>
<!-- Half Page Image Background Carousel Header -->
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to = "0" class="active"></li>
<li data-target="#myCarousel" data-slide-to = "1"></li>
<li data-target="#myCarousel" data-slide-to = "2"></li>
<li data-target="#myCarousel" data-slide-to = "3"></li>
<li data-target="#myCarousel" data-slide-to = "4"></li>
<li data-target="#myCarousel" data-slide-to = "5"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="../Images/golfin_2.jpg'" >
<div class="carousel-caption">
<h3>Spending quality time with my baby at miniture golf.</h3>
</div>
</div>
<div class="item">
<img src="../Images/pink and black_2.jpg'" >
<div class="carousel-caption">
<h3>Rocking pink and and black at Tyler's propasal to Mulenga.</h3>
</div>
</div>
<div class="item">
<img src="../Images/convention foodtime_2.jpg'" >
<div class="carousel-caption">
<h3>Went out to eat after 1st day of convention. Its was Good!</h3>
</div>
</div>
<div class="item">
<img src="../Images/Wifey and Me 1_2.jpg'" >
</div>
<div class="carousel-caption">
<h3>Ally and I at Tyler and Mulenga's Wedding.</h3>
</div>
<div class="item">
<img src="../Images/truelove_2.jpg'" >
</div>
<div class="carousel-caption">
<h3>Our fist moment in PA. First photo together</h3>
</div>
<div class="item">
<img src="../Images/first date_2.jpg'" >
</div>
<div class="carousel-caption">
<h3>First date out in feild service</h3>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
</article>
</section>
<footer class="footer container-fluid">
<p>Hope you enjoy my main practice page. Its only the beginning!</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="javascript/bootstrap.min.js"></script>
</body>
</html>
This is a picture of how my site looks now. As you can see, no images are showing up and the half page carousel is not taking up half the space. 我期待着您的有用建议。我对任何事都持开放态度。
答案 0 :(得分：0)
Bootstrap Carousal示例！试试这个
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://i.imgur.com/EvzEpEi.jpg" alt="Chania">
</div>
<div class="item">
<img src="http://i.imgur.com/VzV3NwJ.jpg" alt="Chania">
</div>
<div class="item">
<img src="http://i.imgur.com/zQIlCOu.jpg" alt="Chania">
</div>
<div class="item">
<img src="http://i.imgur.com/zQIlCOu.jpg" alt="Chania">
</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>
答案 1 :(得分：0)
认为问题出在你的js上。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Gallery</title>
</head>
<body>
<header id="container-fluid">
<hgroup>
<h1> <a href="index.html" title="Love Forever"><span class="header1">True Love Endures Forever</span> </h1>
</hgroup>
</header>
<nav class="navbar navbar-default">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="About Us.html">About Us</a></li>
<li><a href="Contact Us.html">Contact us</a></li>
</ul>
</nav >
<section class="container-fluid">
<article>
<!-- Half Page Image Background Carousel Header -->
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to = "0" class="active"></li>
<li data-target="#myCarousel" data-slide-to = "1"></li>
<li data-target="#myCarousel" data-slide-to = "2"></li>
<li data-target="#myCarousel" data-slide-to = "3"></li>
<li data-target="#myCarousel" data-slide-to = "4"></li>
<li data-target="#myCarousel" data-slide-to = "5"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://www.ricoh-imaging.co.jp/english/r_dc/caplio/r7/img/sample_04.jpg" >
<div class="carousel-caption">
<h3>Spending quality time with my baby at miniture golf.</h3>
</div>
</div>
<div class="item">
<img src="http://www.seoghostwriter.com/wp-content/themes/thesis_151/rotator/sample-4.jpg" >
<div class="carousel-caption">
<h3>Rocking pink and and black at Tyler's propasal to Mulenga.</h3>
</div>
</div>
<div class="item">
<img src="http://www.gloriana.com/sites/g/files/g2000004666/f/Sample-image10-highres.jpg" >
<div class="carousel-caption">
<h3>Went out to eat after 1st day of convention. Its was Good!</h3>
</div>
</div>
<div class="carousel-caption">
<h3>First date out in feild service</h3>
</div>
<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>
</div>
</article>
</section>
<footer class="footer container-fluid">
<p>Hope you enjoy my main practice page. Its only the beginning!</p>
</footer>
</body>
</html>
By changing the link below of the js it works fine and displays the image for me. Try changing the links