Question

Bootstrap中是否可以在旋转木马旁边放置旋转木马？我想在右侧有一些指示器上有字体，所以我知道我点击了哪个滑块。

图片说明我想要的东西：

Answer 1

您可以将控件放在任何位置，这些是使它们工作的标记。 href="#myCarousel"指向轮播ID，data-slide="next"设置行为：

<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">next</a>

<a class="right carousel-control" href="#myCarousel" role="button" data-slide="prev">prev</a>

Answer 2

这样的事可能适合你：https://codepen.io/anon/pen/zNOOrQ

HTML

   <div class="container">
      <div class="page-header">
        <h1>Bootstrap carousel with number indicator</h1>
      </div>
    </div>
    <div class="container">
      <div id="carousel-example-generic" class="carousel slide">
      <!-- Indicators --> 
      <ol class="carousel-indicators carousel-indicators-numbers">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active">Slide 1</li><br>
        <li data-target="#carousel-example-generic" data-slide-to="1">Slide 2</li><br>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="http://placehold.it/1200x500" alt="...">
        </div>
        <div class="item">
          <img src="http://placehold.it/1200x500" alt="...">
        </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>

CSS

.carousel-indicators-numbers {
    li {
      display: block;
      position: relative;
      left:140%;
      bottom: 150px;
      text-indent: 0;
      margin: 0 2px;
      width: 70px;
      height: 30px;
      border: none;
      line-height: 30px;
      color: #fff;
      background-color: #999;
      transition: all 0.25s ease;
      &.active, &:hover {
        margin: 0 2px;
        width: 70px;
        height: 30px;
        background-color: #337ab7;        
      }
    }
}

它旁边的旋转木马指示器Bootstrap

2 个答案: