Jquery 带中心分区和多分区的引导传送带显示

所以简而言之，我需要在这个插件中使用类似“中心模式”的东西

我需要这样做，但使用引导。因为潜在客户希望尽可能避免使用插件。除非使用插件会更简单

我所在项目的开发负责人希望尽可能避免添加插件。我们使用的是Bootstrap3，他认为bootstrap附带的旋转木马可以进行编辑以满足我们的需要。试着编辑旋转木马会更省时吗，或者从头开始构建一些东西（在这一点上，使用插件不是更有意义吗？）

我唯一的想法是创建一个div，其中包含一组内联div，这些div可以在单击时进行转换。这是正确的方法吗

或者有没有一种简单的方法来操作内置旋转木马

到目前为止我所处的位置

h2{
保证金：0；
颜色：#666；
填充顶部：90px；
字体大小：52px；
字体系列：“投石机ms”，无衬线；
}
.项目{
背景：白色；
文本对齐：居中；
高度：300px！重要；
显示：内联块；
}
旋转木马{
边缘顶部：20px；
}
.bs示例{
利润率：20px；
}
.carousel.carousel-fade.项目{
不透明度：0；
过滤器：alpha（不透明度=0）；/*ie修复*/
}
.carousel.carousel-fade.active.item{
不透明度：1；
过滤器：alpha（不透明度=100）；/*ie修复*/
}

TwitterBootstrap3Carousel示例



幻灯片1
第一张幻灯片标签
Lorem ipsum dolor sit amet，是一位杰出的献身者

幻灯片2
第二张幻灯片标签
阿利奎姆坐在阿梅特孕妇床上，方便孕妇

幻灯片3
第三张幻灯片标签
这是一个伟大的共产主义者

---

我看了一眼。我花了这么短的时间快速拉小提琴，应该足以让你开始了。我已经对齐了引导行中的旋转木马元素，箭头按钮将更改您看到的行。在设置了缩略图的样式之后，我已经开始看起来像您示例中的一个，您应该开始尝试通过向活动类添加CSS，使一个元素作为活动元素而不是整行突出。我希望这能让您走上正确的道路：）

使用bootstrap创建类似的效果非常容易。您可以编辑旋转木马元素的CSS，以获得所需的效果。左箭头和右箭头也可以开箱即用，可以通过操纵来提供所需的视觉效果。祝你好运我一直在搞砸它，但是被卡住了。我在我现在的位置添加了一把小提琴。好的，伙计，我会看一看：）不确定你想要实现什么。sburke0708我正在尝试使用引导默认旋转木马，并使其像我链接的slick的“中心模式”。想象一下这个D 5 divs，O居中，点击左键或右键，下一个D将居中，但它们必须同时显示在屏幕上。太棒了，非常感谢，我会看一看！我感谢所有的帮助！我的荣幸。希望你能找到你想要的！

<!-- Carousel items -->
            <div class="carousel-inner">
              <div class="item active">
                <div class="row">
                  <div class="col-sm-3"><a class="thumbnail"> 1 </a>
                  </div>
                  <div class="col-sm-3"><a class="thumbnail"> 2 </a>
                  </div>
                  <div class="col-sm-3"><a class="thumbnail"> 3 </a>
                  </div>
                  <div class="col-sm-3"><a class="thumbnail"> 4 </a>
                  </div>
                </div>
                <!--/row-->
              </div>
              <!--/item-->
              <div class="item">
                <div class="row">
                  <div class="col-sm-3"><a class="thumbnail"> 5 </a>
                  </div>
                  <div class="col-sm-3"><a class="thumbnail"> 6 </a>
                  </div>
                  <div class="col-sm-3"><a class="thumbnail"> 7 </a>
                  </div>
                  <div class="col-sm-3"><a class="thumbnail"> 8 </a>
                  </div>
                </div>
                <!--/row-->
              </div>
              <!--/item-->
            </div>
            <!--/carousel-inner-->
            <a class="left carousel-control" href="#slideCarousel" data-slide="prev">‹</a>

            <a class="right carousel-control" href="#slideCarousel" data-slide="next">›</a>