添加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轮播组件

回答

相关问题