Question

我的Bootstrap旋转木马正在跳过图像而我无法找到原因。基本上它从图像1到图像3，然后它进入图像2并从那里跳回到图像1并重复循环。有人可以帮助我吗？

轮播代码：

DF = data.frame(x = c("1/1","2/3"))
typeof(DF$x) # "integer"
class(DF$x)  # "factor"

快速编辑：我也注意到指标不再对鼠标点击做出反应，我该如何解决？

Answer 1

您的HTML结构包含一些不合适的组件或不正确的类/ ID：

1）class="carousel-slide"应该是class="carousel slide"（不是连字符）

2）此div <div class="carousel-inner">应放在indicators之后和第一个item之前。

其他结构性因素：

1）您使用id="banners"四次，ID只能使用一次。请参阅explanation。

2）您使用的<div class="container"> <div class="container col-xs-6">没有任何优势，框架实际上是这样的：

<div class="container">
    <div class="row">
        <div class="col-xs-6">

3）您不需要class="img-responsive"。

4）使用 xs （class="col-xs-6"）列类很可能会将您的Carousel缩小到非常小的尺寸。

5）你可以使用data-interval="2000"（或你的JS）来改变你的幻灯片速度（这只是信息性的，因为如果你关心的只是速度，那就更容易了）

参见工作示例：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div id="banners" class="carousel slide" data-ride="carousel" data-interval="5000">
        <ol class="carousel-indicators">
          <li data-target="#banners" data-slide-to="0" class="active"></li>
          <li data-target="#banners" data-slide-to="1"></li>
          <li data-target="#banners" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src='http://placehold.it/1350x550/f00/fff?text=Slide 1' />
          </div>
          <div class="item">
            <img src='http://placehold.it/1350x550/000/fff?text=Slide 2' />
          </div>
          <div class="item">
            <img src='http://placehold.it/1350x550/ff0/fff?text=Slide 3' />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<hr>

<div class="container">
  <div class="row">
    <h3>XS Column Class: Resize your brower to see the difference.</h3>
    <div class="col-xs-6">
      <div id="banners3" class="carousel slide" data-ride="carousel" data-interval="5000">
        <ol class="carousel-indicators">
          <li data-target="#banners3" data-slide-to="0" class="active"></li>
          <li data-target="#banners3" data-slide-to="1"></li>
          <li data-target="#banners3" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src='http://placehold.it/1350x550/000/fff?text=Slide 1' />
          </div>
          <div class="item">
            <img src='http://placehold.it/1350x550/f00/fff?text=Slide 1' />
          </div>
          <div class="item">
            <img src='http://placehold.it/1350x550/f00/fff?text=Slide 1' />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Bootstrap轮播正在制作2而不是1的步骤

1 个答案: