Bootstrap的传送带不会显示我的图像或对控件作出反应。Bootstrap 3传送带不工作

这是我的HTML：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>Skates R Us</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="stylesheet" href="css/bootstrap.min.css"> 
     <link rel="stylesheet" href="css/global.css"> 
    </head> 

    <body> 
     <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a href="#" class="navbar-brand"> 
         Skates R Us 
        </a> 
       </div> 
       <div class="collapse navbar-collapse"> 
        <ul class="nav navbar-nav"> 
         <li class="active"> 
          <a href="index.html">Home</a> 
         </li> 
         <li> 
          <a href="contact.html">Contact/About</a> 
         </li> 
         <li> 
          <a href="shop.html">Shop</a> 
         </li> 
         <li> 
          <a href="new.html">New Products</a> 
         </li> 
         <li> 
          <a href="media.html">Media</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 

     <div id="carousel" class="carousel slide" data-ride="carousel"> 
      <ol class="carousel-indicators"> 
       <li data-target="carousel" data-slide-to="0"></li> 
       <li data-target="carousel" data-slide-to="1"></li> 
       <li data-target="carousel" data-slide-to="2"></li> 
      </ol> 
      <div class="carousel-inner"> 
       <div class="item"> 
        <img src="img/slide_1.png" alt="Slide 1"> 
       </div> 
       <div class="item"> 
        <img src="img/slide_2.png" alt="Slide 2"> 
       </div> 
       <div class="item"> 
        <img src="img/slide_3.png" alt="Slide 3"> 
       </div> 
      </div> 
      <a href="#carousel" class="left carousel-control" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left"></span> 
      </a> 
      <a href="#carousel" class="right carousel-control" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right"></span> 
      </a> 
     </div> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
     <script> 
      $("#carousel").carousel(); 
     </script> 
    </body> 
</html>

我的CSS：

#carousel { 

    margin-top: 50px; 

} 

.carousel { 
    height: 500px; 
    margin-bottom: 60px; 
} 
/* Since positioning the image, we need to help out the caption */ 
.carousel-caption { 
    z-index: 10; 
} 

/* Declare heights because of positioning of img element */ 
.carousel .item { 
    width: 100%; 
    height: 500px; 
    background-color: #777; 
} 
.carousel-inner > .item > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: 500px; 
} 

@media (min-width: 768px) { 
    .carousel-caption p { 
      margin-bottom: 20px; 
      font-size: 21px; 
      line-height: 1.4; 
    } 
} 

img { 
    background: red; 
}

有在Chrome控制台没有错误，代码几乎是完全一样的，从引导程序的例子。

这是该网站看起来像在我结束： Site

来源

2013-12-17 Liam Potter

可能是因为您没有准备好jQuery文档就绪代码：http://learn.jquery.com/using-jquery-core/document-ready/ –

您正在使用哪个版本的Bootstrap？ 2.3.2还是3.0？ – Ranveer

我正在使用Bootstrap 3.0 –

只是有两个小东西在这里。

首先是在下面的传送带指示符列表项：

<li data-target="carousel" data-slide-to="0"></li>

您需要通过data-target属性一个选择这意味着ID必须以#前缀。所以他们更改为以下：

<li data-target="#carousel" data-slide-to="0"></li>

其次，你需要给传送带上的起点因此两个转盘指标项目和转盘内的项目必须有一个active类。就像这样：

<ol class="carousel-indicators"> 
    <li data-target="#carousel" data-slide-to="0" class="active"></li> 
    <!-- Other Items --> 
</ol> 
<div class="carousel-inner"> 
    <div class="item active"> 
     <img src="http://lorempixel.com/1500/600/abstract/1" alt="Slide 1" /> 
    </div> 
    <!-- Other Items --> 
</div>

Working Demo in Fiddle

来源

2013-12-20 21:50:06 KyleMit

@ user2133268，当提问时你真的应该尽量做好尽可能多的工作，使它成为一个**好问题。这里有一吨*代码，与你的例子无关。您通常应该尝试将代码放入jsfiddle.net或bootply.com，以便其他人可以立即进行调试。您应该从文档中的一个工作示例开始，逐行比较以查看其不同之处。这些都是您*可以主动回答自己的问题的方法。他们*授权*你。这是一种良好的礼仪，但它也使你在编程时更好。 – KyleMit

非常有帮助的小提琴 – Pitelk

** SO **特别强制在帖子中发布代码，如果你必须发布jsfiddle链接！ @KyleMit –

以下是你需要做

只需用下面的代码

你已经错过了“＃”的数据替换转盘格的变化目标并添加第一个项目的活动类

<div id="carousel" class="carousel slide" data-ride="carousel"> 
      <ol class="carousel-indicators"> 
       <li data-target="#carousel" data-slide-to="0"></li> 
       <li data-target="#carousel" data-slide-to="1"></li> 
       <li data-target="#carousel" data-slide-to="2"></li> 
      </ol> 
      <div class="carousel-inner"> 
       <div class="item active"> 
        <img src="img/slide_1.png" alt="Slide 1"> 
       </div> 
       <div class="item"> 
        <img src="img/slide_2.png" alt="Slide 2"> 
       </div> 
       <div class="item"> 
        <img src="img/slide_3.png" alt="Slide 3"> 
       </div> 
      </div> 
      <a href="#carousel" class="left carousel-control" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left"></span> 
      </a> 
      <a href="#carousel" class="right carousel-control" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right"></span> 
      </a> 
     </div>

来源

2014-09-04 07:48:38

我们Bootstrap Carousel有各种参数可以控制。

即

间隔：指定每个幻灯片之间的延迟（毫秒）。

暂停：当鼠标指针进入传送带时暂停传送带通过下一张幻灯片，并在鼠标指针离开传送带时继续滑动。

包装：指定传送带是否应该通过所有幻灯片持续，或在最后一张幻灯片

停止供您参考：

富勒详细信息，请click here...

希望这会对你有所帮助:)

注意：这是为了进一步的帮助..我的意思是一旦加载转盘后，您如何定制或更改默认行为。

来源

2016-03-16 09:23:38

这是为了进一步的帮助..我的意思是一旦加载转盘后，你如何定制或更改默认行为。 –

对我来说，旋转木马不在DreamWeaver CC中工作，在我正在玩的“模板”页面中提供了代码。我需要将data-ride =“carousel”属性添加到轮播div以便其开始工作。感谢Adarsh为他的代码片断突出了缺失的属性。

来源

2018-01-26 09:28:57 Paulepops

Bootstrap 3传送带不工作

回答

Working Demo in Fiddle

相关问题