引导轮播更多幻灯片链接到一个指标

Question

我正在使用 Bootstrap 轮播控件，并且我需要使用比幻灯片更少的指示器。例如，对于幻灯片 1 - 3，第一个指示器将处于活动状态。当我点击另一个指标时，它会跳到幻灯片 4。

我试图通过在 HTML 中包含所有指标来解决这个问题，但用display: none 隐藏其中一些指标。然后用 JS 找到活动幻灯片，删除.active 类并将其添加到右侧指示器中。

HTML

<!-- Indicators -->
<ul class="carousel-indicators">
   <!-- For these three only #a indicator should be active -->
   <li id="a" data-target="#carousel" data-slide-to="0" class="active"></li>
   <li id="a1" class="hidden" data-target="#carousel" data-slide-to="1"></li>
   <li id="a2" class="hidden" data-target="#carousel" data-slide-to="2"></li>

   <!-- another group -->
   <li id="b" data-target="#carousel" data-slide-to="3"></li>
</ul>

JavaScript

$('#carousel').on('slid.bs.carousel', function (e) {
    if ($("#a1").hasClass("active")) {
        $("#a1").removeClass("active");
        $("#a").addClass("active");
    } else if ($("#a2").hasClass("active")) {
        $("#a2").removeClass("active");
        $("#a").addClass("active");
    }
});

这是一个例子 - https://jsfiddle.net/9x5u7kjx/2/

我认为这根本不是优雅的解决方案，那么有没有更好的方法呢？

---

编辑： 我将尝试更清楚地解释它。

例如有 12 张幻灯片，它们会一张一张地自动滑动。它们可以由箭头（左和右）控制。 但只有 4 个指标（轮播下方的那些圆圈）。对于幻灯片 1 - 3，第一个指示器应处于活动状态，对于 4 - 6，第二个指示器应处于活动状态，依此类推。

所以我可以使用箭头一个一个地滑动项目，但是当我点击第二个指示器时，轮播会跳到幻灯片 4。

看看这个例子，它应该可以正常工作，但我认为这可以更好地解决。

Answer 1

带有 4 个指标而不是 12 个指标的轮播

1。标准指标。 CSS 技巧

Bootstrap 的指标是透明的，除了活动的。所以我把它们叠放在一起，得到了两叠，每叠三个指标。

第二个和第三个指标位于第一个指标的下方。因此，只有第一个指标会对点击做出反应。

.carousel-indicators > li:nth-of-type(3n+2),
.carousel-indicators > li:nth-of-type(3n+3) {
  margin-left: -15px;
  position: relative;
  z-index: -1;
}

Bootstrap 的活动指示器比非活动指示器宽 2 个像素。它需要比其他的多移动 1 个像素。

.carousel-indicators > li.active:nth-of-type(3n+2),
.carousel-indicators > li.active:nth-of-type(3n+3) {
  margin-left: -16px;
}

检查结果：

https://jsfiddle.net/glebkema/346n1cwo/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.carousel-inner > .item > img {
  width: 100%;
}
.carousel-indicators > li:nth-of-type(3n+2),
.carousel-indicators > li:nth-of-type(3n+3) {
  margin-left: -15px;
  position: relative;
  z-index: -1;
}
.carousel-indicators > li.active:nth-of-type(3n+2),
.carousel-indicators > li.active:nth-of-type(3n+3) {
  margin-left: -16px;
}

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    <li data-target="#carousel-example-generic" data-slide-to="4"></li>
    <li data-target="#carousel-example-generic" data-slide-to="5"></li>
    <li data-target="#carousel-example-generic" data-slide-to="6"></li>
    <li data-target="#carousel-example-generic" data-slide-to="7"></li>
    <li data-target="#carousel-example-generic" data-slide-to="8"></li>
    <li data-target="#carousel-example-generic" data-slide-to="9"></li>
    <li data-target="#carousel-example-generic" data-slide-to="10"></li>
    <li data-target="#carousel-example-generic" data-slide-to="11"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=0" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=1" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=2" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=3" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=4" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=5" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=6" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=7" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=8" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=9" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=10" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=11" 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 class="alert text-center">
  Bootstrap carousel with 4 standard indicators instead of 12 by CSS trick
</div>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

---

2。自定义指标。 jQuery

​​>

https://jsfiddle.net/glebkema/0L97fuzw/

$( document ).ready(function() {
  var CLASS_CAROUSEL    = '#carousel-example-generic';
  var CLASS_INDICATORS  = '#carousel-indicators';
  var CLASS_ACTIVE      = CLASS_INDICATORS + '>li.active';
  var selectCarousel    = $(CLASS_CAROUSEL); 

  selectCarousel.on('slide.bs.carousel', function (e) {
    var indexTarget = $(e.relatedTarget).index();
    indexTarget = indexTarget - indexTarget % 3;
    
    var selectTarget = $(CLASS_INDICATORS + '>li[data-slide-to="' + indexTarget + '"]');
    if ( !selectTarget.hasClass('active') ) {
      $(CLASS_ACTIVE).removeClass('active');
      selectTarget.addClass('active');
    }
  });
});

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.carousel-inner > .item > img {
  width: 100%;
}

/* design */
.carousel-indicators > li,
.carousel-indicators > li.active{
  border-radius: 0;
  border-width: 1px;
  height: 30px;
  line-height: 28px; /* = height - 2 * border-width */
  margin: 0 1px; 
  text-indent: 0;
  width: 70px;
}
.carousel-indicators > li {
  border-color: #666;
  color: #666;
}
.carousel-indicators > li:hover {
  background-color: #fee;
}
.carousel-indicators > li.active {
  border-color: red;
  color: red;
}

/* location */
.carousel-indicators {
  margin: 6px 0;
  position: static;
  width: 100%;
}

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=0" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=1" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=2" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=3" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=4" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=5" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=6" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=7" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=8" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=9" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=10" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=11" 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>

<!-- Indicators -->
<ol id="carousel-indicators" class="carousel-indicators">
  <li data-target="#carousel-example-generic" data-slide-to="0" class="active">0 - 2</li>
  <li data-target="#carousel-example-generic" data-slide-to="3">3 - 5</li>
  <li data-target="#carousel-example-generic" data-slide-to="6">6 - 8</li>
  <li data-target="#carousel-example-generic" data-slide-to="9">9 - 11</li>
</ol>

<div class="alert text-center">
  Bootsrap carousel with 4 custom indicators instead of 12 by jQuery
</div>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>