时间戳

首页 > 解决方案 > 仅在 Bootstrap 3 轮播上显示 3 个轮播指示器

css - 仅在 Bootstrap 3 轮播上显示 3 个轮播指示器

问题描述

我的页面上有 Bootstrap 3 轮播，有 10 多个轮播幻灯片，我只想显示轮播的 3 个指标，因为我不想显示 N 个指标，因为幻灯片图像是动态的！！

在轮播穿过第三张幻灯片（启用自动滚动/更改）后，第三个指示器应保持活动状态，直到轮播更改为第一张幻灯片。如何做到这一点？

标签： csstwitter-bootstraptwitter-bootstrap-3

解决方案

假设你的轮播的 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>

这里有五张幻灯片和五个指标。对我来说，最简单的解决方案是 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
}

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

您只是将它们隐藏在第一个和最后一个“可见”后面。

推荐阅读