2016-04-13 10 views
0

パーソナルプロジェクトにカルーセルブートストラップ4を実装しようとしています。 HTML5、CSS3、ブートストラップ4、JSの基本的な知識があります。カルーセルコンポーネントの使用方法に関するいくつかのディスカッションやチュートリアルを見ていますが、ブラウザで正しい出力を得ることはできません。私はchromeとfirefoxを使用し、両方のブラウザで同じ問題を抱えています。私はすでに(リンク)と(スクリプト)のパスをチェックしていますので、イメージをブラウザに正しくロードできるように(img src-"#")を(img src = "#")に変更しなければなりませんでした。イメージはお互いの上にあり、この問題の修正方法はわかりません。私はBootstrapウェブサイトからコードを直接コピーします。これはコミュニティでの初めての質問です。ちょうどこのコンポーネントの少しの不満を感じる。ブートストラップ4カルーセルコンポーネントの問題

ありがとうございます!

Image example of problem in browser

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 

    <title>Carousel-testing!</title> 
    <link rel="stylesheet" href="assets\css\bootstrap.css"> 
    <link rel="stylesheet" href="assets\css\bootstrap-theme.css"> 
    <link rel="stylesheet" href="assets\css\app.css"> 
    <link rel="stylesheet" href="assets\css\animate.css"> 

    <script type="text/javascript" src="assets\js\jquery.js"></script> 
    <script type="text/javascript" src="assets\js\bootstrap.js"></script> 
    <script type="text/javascript" src="assets\js\app.js"></script> 
</head> 

<nav> 

</nav> 

<section id="carousel"> 

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
     <div class="carousel-item active"> 
     <img src="assets\images\2736779-casino-roulette-in-water-and-fire-isolated-on-black-background.jpg" alt="First slide"> 
     </div> 
     <div class="carousel-item"> 
     <img src="assets\images\DealerBust.jpg" alt="Second slide"> 
     </div> 
     <div class="carousel-item"> 
     <img src="assets\images\FH_Gaming_Main-new.jpg" alt="Third slide"> 
     </div> 
    </div> 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
     <span class="icon-prev" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
     <span class="icon-next" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    </div> 
</section> 

<body> 


</body> 

</html> 

答えて

0

あなたはそれを正しく表示するためには<body>タグ内にHTMLを配置する必要があります。

<body> 
<nav> 

</nav> 

<section id="carousel"> 

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
     <div class="carousel-item active"> 
     <img src="assets\images\2736779-casino-roulette-in-water-and-fire-isolated-on-black-background.jpg" alt="First slide"> 
     </div> 
     <div class="carousel-item"> 
     <img src="assets\images\DealerBust.jpg" alt="Second slide"> 
     </div> 
     <div class="carousel-item"> 
     <img src="assets\images\FH_Gaming_Main-new.jpg" alt="Third slide"> 
     </div> 
    </div> 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
     <span class="icon-prev" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
     <span class="icon-next" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    </div> 
</section> 
</body> 

</html> 
+0

[OK]を、私はbodyタグ内のHTMLを置きます。まだカルーセルコンポーネントは動作しません。 – Hecbel

+0

コンソールにエラーが表示されますか? Bootstrapとapp JSスクリプトタグを本体の下部に移動してみてください。 – litel

+0

ありがとうございます。コンソールは、bootstrap.jsの441行目にエラーがあると教えてくれました。友人は、すべてのブートストラップファイルをダウンロードして最初から開始するように教えてくれました。今はすべてが有益に働いていますが、何が原因でエラーが発生したのか分かりませんが、それはそのトリックを行うようです。プロンプトの返信をありがとう! – Hecbel

0

"carousel-item"クラスを "item"に変更します。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
<meta http-equiv="x-ua-compatible" content="ie=edge"> 

<title>Carousel-testing!</title> 
<link rel="stylesheet" href="assets\css\bootstrap.css"> 
<link rel="stylesheet" href="assets\css\bootstrap-theme.css"> 
<link rel="stylesheet" href="assets\css\app.css"> 
<link rel="stylesheet" href="assets\css\animate.css"> 

<script type="text/javascript" src="assets\js\jquery.js"></script> 
<script type="text/javascript" src="assets\js\bootstrap.js"></script> 
<script type="text/javascript" src="assets\js\app.js"></script> 
</head> 

<nav> 

</nav> 

<section id="carousel"> 

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
<ol class="carousel-indicators"> 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
</ol> 
<div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
    <img src="assets\images\2736779-casino-roulette-in-water-and-fire-isolated-on-black-background.jpg" alt="First slide"> 
    </div> 
    <div class="item"> 
    <img src="assets\images\DealerBust.jpg" alt="Second slide"> 
    </div> 
    <div class="item"> 
    <img src="assets\images\FH_Gaming_Main-new.jpg" alt="Third slide"> 
    </div> 
</div> 
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
    <span class="icon-prev" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
</a> 
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
    <span class="icon-next" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
</a> 
</div> 
</section> 

+0

ブートストラップ4では、 'item'クラスが' carousel-item'に変更されました。 http://v4-alpha.getbootstrap.com/components/carousel/ – litel

+0

それは本当のラジャットです。私は再びブートストラップをダウンロードしなければならなかった。エラーは何だったのか分かりませんが、今は修正されています。プロンプトの返信をありがとう! – Hecbel

関連する問題