Javascript 引导旋转链接到一个指示器的多个幻灯片

我正在使用引导转盘控件，我需要使用比幻灯片更少的指示器。因此，例如幻灯片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>

以下是一个例子-

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

---

编辑： 我会尽量解释得更清楚

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

因此，我可以使用箭头逐个滑动项目，但当我单击第二个指示器时，旋转木马将跳到幻灯片4

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

Carousel使用4个指标，而不是12个指标 1.标准指标。CSS技巧 除活动指示器外，引导指示器是透明的。所以我把它们放在一起，收到两堆三个指示器

第二和第三个指标位于第一个指标之下。因此，只有第一个指示器在单击时作出反应

.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;
}

检查结果：

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.carousel-inner>.item>img{
宽度：100%；
}
.转盘指示器>li:n类型（3n+2），
.转盘指示器>li:n类型（3n+3）{
左边距：-15px；
位置：相对位置；
z指数：-1；
}
.转盘指示器>li.激活：第n种类型（3n+2），
.转盘指示器>li.活动：第n个类型（3n+3）{
左边距：-16px；
}

引导旋转木马，4个标准指示器，而不是12个CSS技巧

考虑编辑您的问题，不清楚您在问什么。您是说，单击下一个指示器后，您的幻灯片应该移到第二张幻灯片，而不是第四张幻灯片？很抱歉，现在更容易理解了吗？谢谢，聪明的解决方案！但是如果我有一个自定义的指示器，里面有文本，它们会相互重叠，文本会更粗体一些，并且有边框。请看这里-。有没有办法用绝对定位来修复它？@jstorm31我已经用jQuery解决了这个问题。我已经更新了我的答案。@JS31这是到的链接。恐怕它太难使用了。@jstorm31引导的carousel类公开了<代码>slide.bs.carousel在调用slide实例方法时立即激发<代码>滑动的.bs.carousel在旋转木马完成其滑动转换时触发。因此，请检查脚本中的字母

e

。@jstorm31我注意到您的JSFIDLE中有3个问题。1） 添加

}）在javascript的末尾。2） 将指示器移出转盘。否则，转盘将在每次更换滑块时切换指示器。3） 将幻灯片编号移动1。旋转木马使用数字，从零开始。12张幻灯片的数字从0到11。指示器也使用从0到11的数字。但幻灯片上显示的是数字从1到12的图像。
.carousel-indicators > li.active:nth-of-type(3n+2),
.carousel-indicators > li.active:nth-of-type(3n+3) {
  margin-left: -16px;
}