Question

我的页面上有Bootstrap 3旋转木马，有10多个旋转木马幻灯片，我只想为该旋转木马显示3个指示器，因为由于幻灯片图像是动态生成的，我不想显示N个指示器！ >

轮播穿过第3张幻灯片（启用自动滚动/更改）后，第3个指示器应保持激活状态，直到轮播更改为第1张幻灯片为止。如何实现呢？

Answer 1

假设轮播的html为以下

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
      <li data-target="#myCarousel" data-slide-to="4"></li>
      <li data-target="#myCarousel" data-slide-to="5"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="la.jpg" alt="Los Angeles" style="width:100%;">
      </div>
      <div class="item">
        <img src="chicago.jpg" alt="Chicago" style="width:100%;">
      </div>
      <div class="item">
        <img src="ny.jpg" alt="New york" style="width:100%;">
      </div>
      <div class="item">
        <img src="ny.jpg" alt="New york" style="width:100%;">
      </div>
      <div class="item">
        <img src="ny.jpg" alt="New york" style="width:100%;">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

在这里，您有5张幻灯片和5个指示器。对我来说，最简单的解决方案是css解决方案（因此，不涉及js）：您只需在要隐藏的指标中添加一个类，更准确地说是在要创建的最后一个指标之后的指标中添加一个类可见，并且与您要隐藏的指标之前的指标不同，例如


    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li class="not-visible-sx" data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
      <li data-target="#myCarousel" data-slide-to="4"></li>
      <li class="not-visible-dx"  data-target="#myCarousel" data-slide-to="5"></li>
    </ol>

然后使用此CSS代码

.not-visible-sx{
    position: absolute;
    top: 3px;
    border: none;
}
.not-visible-dx{
    position: absolute;
    top: 3px;
    border: none;
    margin-left: -12px
}

（边框：不需要更好地查看指标）

您只需将它们隐藏在第一个和最后一个“可见”之后即可。

在Bootstrap 3传送带上仅显示3个传送带指示器

1 个答案: