2017-03-14 7 views
0
<!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

**画像**が正しく見つかりませんでした。要素を検査してみてください。 – Momin

+0

この問題をどのように修正しますか? –

+0

私はFirefoxの開発者版のような開発ツールを使用し、フロントエンドのバグを発見して問題を修正するためにinspect要素システムを組み込んだ – Momin

答えて

0

ブートストラップ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>

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 
+0

okありがとう、少し後でそれをチェックします。 –

関連する問題