ブートストラップカルーセル画像スタック

Question

私はブートストラップカルーセルを使用する方法を学ぼうとしています。私の問題は、私の2つの画像がお互いに積み重なっていることです。私はコードを100回見てきましたが、何が間違っているのか理解できません。

<div id="filmSnurraID" class="carousel slide" data-ride="carousel"> 

     <ol class="carousel-indicators"> 
      <li data-target="#filmSnurraID" data-slide-to="0" class="active"></li> 
      <li data-target="#filmSnurraID" data-slide-to="1"></li> 
     </ol> 

     <div class="carousel-inner" role="listbox"> 
      <div class="item active"> 
       <img src="./frukt2.jpg" alt="Ett plan"> 
       <div class="carousel-caption"><h3>Ett plan</h3></div> 
      </div> 

      <div class="item"> 
       <img src="./frukt1.jpg" alt="Ett annat plan"> 
      </div> 
     </div> 

     <a class="left carousel-control" href="#filmSnurraID" role="button" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
      <span class="sr-only">Previous</span> 
     </a> 

     <a class="right carousel-control" href="#filmSnurraID" role="button" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
      <span class="sr-only">Next</span> 
     </a> 
    </div> 

Answer 1

ここでの問題は何ですか？

コードにBootstrap CSSが正しく読み込まれていないと思われます。 このように、ERROR CODEPENでは、ブートストラップCDNを削除しました。

以下の手順に従ってください。

---

あなたは、正しい順序で

CSS輸入を

1. ブートストラップCSS CDN /ファイルのインポート

JS輸入あなたのCSS /スクリプトファイルを積み重ねている必要があるすべて

jQueryのCDN

ブートストラップJS CDN（これはjQueryの最初にロードする必要があるため、jQueryのに依存するように）

---

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<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> 
 
<div id="filmSnurraID" class="carousel slide" data-ride="carousel"> 
 

 
    <ol class="carousel-indicators"> 
 
    <li data-target="#filmSnurraID" data-slide-to="0" class="active"></li> 
 
    <li data-target="#filmSnurraID" data-slide-to="1"></li> 
 
    </ol> 
 

 
    <div class="carousel-inner"> 
 
    <div class="item active"> 
 
     <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="Ett plan"> 
 
     <div class="carousel-caption"> 
 
     <h3>Ett plan</h3> 
 
     </div> 
 
    </div> 
 

 
    <div class="item"> 
 
     <img src="https://www.aussiespecialist.com/content/asp/en_sg/sales-resources/image-and-video-galleries/jcr:content/mainParsys/hero/image.adapt.1663.medium.jpg" alt="Ett annat plan"> 
 
    </div> 
 
    </div> 
 

 
    <a class="left carousel-control" href="#filmSnurraID" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 

 
    <a class="right carousel-control" href="#filmSnurraID" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div>