添加Bootstrap輪播組件

有關添加Bootstrap輪播組件的非常簡單的問題...我使用下面的代碼將一個簡單的圖片/輪播部分添加到我的網站。 Here is the page from Bootstrap where I got it.當我打開它時，它只是靜態加載頁面上的所有圖像，就像我剛剛添加它們一樣。添加Bootstrap輪播組件

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> 
    <div class="carousel-inner" role="listbox"> 
    <div class="carousel-item active"> 
     <img class="d-block img-fluid" src="img/hotyellowpinkpop.jpg" alt="First slide"> 
    </div> 
    <div class="carousel-item"> 
     <img class="d-block img-fluid" src="img/pinkyellowater.jpg" alt="Second slide"> 
    </div> 
    <div class="carousel-item"> 
     <img class="d-block img-fluid" src="img/purpleyellowmoons.jpg" alt="Third slide"> 
    </div> 
    </div> 
</div>

我有bootstrap js文件存在並鏈接到html文檔中。我錯過了什麼？謝謝

來源

2017-04-19 Peter Viglietta

您正在使用.carousel-item它應該是.item。你可以在這裏看到https://getbootstrap.com/examples/carousel/

<script src="https://cdnjs.cloudflare.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> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img class="d-block img-fluid" src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="First slide"> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="d-block img-fluid" src="http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg" alt="Second slide"> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="d-block img-fluid" src="https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg" alt="Third slide"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-19 23:05:06

下面的例子是一對夫婦，你需要檢查的事情：

爲bootstrap滿載？
- 的.js和.css文件
你initilized的corousel？
- 這裏是jQuery的初始化：$('.carousel').carousel()

如果你做的那些事，讓我們知道，也許給我們一個鏈接到你遇到問題的頁面，或重現它適用於CodePen或JSFiddle等。

來源

2017-04-19 23:07:00

添加Bootstrap輪播組件

回答

相關問題