Question

您好我正在尝试创建一个bootstrap3轮播滑块，我想添加一些图像作为幻灯片指示器，而不是列表默认圆圈。

Html标记：

<div id="carousel-slider" class="carousel slide" data-ride="carousel" data-interval="5000">

            <!-- Slider Indicators -->
            <ul class="carousel-indicators">
                <li data-target="#carousel-slider" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-slider" data-slide-to="1"></li>
                <li data-target="#carousel-slider" data-slide-to="2"></li>
            </ul><!--/ Indicators end-->
</div>

如果我添加img标签如下：

<div id="carousel-slider" class="carousel slide" data-ride="carousel" data-interval="5000">

            <!-- Slider Indicators -->
            <ul class="carousel-indicators">
                <li data-target="#carousel-slider" data-slide-to="0" class="active">
                    <div class="thumbnail">
                        <img class="img-responsive" src="https://s3.amazonaws.com/ooomf-com-files/wdXqHcTwSTmLuKOGz92L_Landscape.jpg">
                    </div></li>
                <li data-target="#carousel-slider" data-slide-to="1"></li>
                <li data-target="#carousel-slider" data-slide-to="2"></li>
            </ul><!--/ Indicators end-->
        <div>

它没有显示任何东西。如何添加图像作为指标而不是

圈？

Answer 1

我认为最重要的是覆盖width内height标记上的li和.carousel-indicators属性。

为此，我创建了一个名为.carousel-indicators--thumbnails的额外修饰符css类，该类已添加到.carousel-indicators div。此修饰符类用于覆盖li，.active和.active .thumbnail类。

＆＃13;

.carousel-indicators.carousel-indicators--thumbnails li {
  width: 80px;
  height: 40px;
  margin: 0;
  border: none;
  border-radius: 0;
}
.carousel-indicators.carousel-indicators--thumbnails .active {
  background-color: transparent;
}
.carousel-indicators.carousel-indicators--thumbnails .active .thumbnail {
  border-color: #337ab7;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-8 col-md-offset-2">
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="5000">
        <!-- Indicators -->
        <ol class="carousel-indicators carousel-indicators--thumbnails">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active">
            <div class="thumbnail">
              <img src="http://www.fillmurray.com/800/400" class="img-responsive">
            </div>
          </li>
          <li data-target="#carousel-example-generic" data-slide-to="1">
            <div class="thumbnail">
              <img src="http://www.fillmurray.com/800/401" class="img-responsive">
            </div>
          </li>
          <li data-target="#carousel-example-generic" data-slide-to="2">
            <div class="thumbnail">
              <img src="http://www.fillmurray.com/800/402" class="img-responsive">
            </div>
          </li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="http://www.fillmurray.com/800/400" width="800" height="400">
            <div class="carousel-caption">
              Slide 1
            </div>
          </div>
          <div class="item">
            <img src="http://www.fillmurray.com/800/401" width="800" height="400">
            <div class="carousel-caption">
              Slide 2
            </div>
          </div>
          <div class="item">
            <img src="http://www.fillmurray.com/800/402" width="800" height="400">
            <div class="carousel-caption">
              Slide 3
            </div>
          </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
</div>

＆＃13;

如何添加图标/图像作为指标而不是在bootstrap3轮播滑块中列出圆圈

1 个答案: