Bootstrap 3旋轉木馬將不會正確顯示，或更改圖像

我似乎無法獲得Bootstrap 3旋轉木馬來打開圖像。它似乎沒有工作。這最初是在CodePen中完成的，但將其全部移至文本編輯器。我已經看遍各地的答案...Bootstrap 3旋轉木馬將不會正確顯示，或更改圖像

這是結果...任何想法？

<!DOCTYPE html> 

<body> 


    <div id="carousel-home" class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
     <li data-target="#carousel-home" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel-home" data-slide-to="1"></li> 
     <li data-target="#carousel-home" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
     <img src="img/flower-21.jpg"> 
     <div class="carousel-caption"> 
      <h3>Flower 1</h3> 
     </div> 
     </div> 
     <div class="item"> 
     <img src="img/flower12.jpg"> 
     <div class="carousel-caption"> 
      <h3>Flower 2</h3> 
     </div> 
     </div> 
     <div class="item"> 
     <img src="img/flowers3.jpg"> 
     <div class="carousel-caption"> 
      <h3>Flower 3</h3> 
     </div> 
     </div> 
    </div> 
    <a class="left carousel-control" href="#carousel-home" 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="#carousel-home" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    </div> 
</body>

JSFiddle

來源

2016-01-30 Brian Hankins