【问题标题】：Link two Bootstrap Carousels on one page在一个页面上链接两个引导轮播
【发布时间】：2014-10-11 05:33:33
【问题描述】：

我有一个有趣的案例，我希望一个页面上有两个轮播，一个轮播控制另一个。
请看http://jsbin.com/bozenixiriko/1/

如果我点击数字，它应该移动到相关的视频幻灯片。如果我在视频轮播中点击下一步，它应该会移动数字轮播。

您能否建议我如何实现此功能？

【问题讨论】：

你能发布你目前拥有的代码（JS、HTML）吗？
您查看过events 的轮播文档吗？当轮播发生变化时，有一个偶数会告诉您
JME：请查看jsbin.com/bozenixiriko/1/edit
这是一个与我认为您想要的非常相似的示例：bootply.com/jme11/u2HGq0HCpH

标签： jquery twitter-bootstrap-3 carousel

【解决方案1】：

我认为您可能会使它变得比需要的复杂一些。你的 jsbin 过期了，所以我做了一个新的小提琴。在此过程中，我优化了您的一些标记（请参阅下面的注释）。

DEMO

HTML：

<div class="container-fluid" id="slider">
    <div class="row">
        <div class="col-xs-12">
            <div id="carousel-text">
                 <h3></h3>
            </div><!--/#carousel-text-->
        </div><!-- /.col-xs-12 #slider -->
        <div class="col-xs-12 hidden-xs carousel slide" data-type="multi" id="numberCarousel">
            <div class="carousel-inner row">
                <div class="item active"> 
                    <div class="col-xs-2">
                        <a data-target="#myCarousel" data-slide-to="0">
                            <span class="fa-stack fa-3x">
                                <i class="fa fa-circle-o fa-stack-2x"></i>
                                <i class="fa fa-stack-1x">1</i>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="item"> 
                    <div class="col-xs-2">
                        <a data-target="#myCarousel" data-slide-to="1">
                            <span class="fa-stack fa-3x">
                                <i class="fa fa-circle-o fa-stack-2x"></i>
                                <i class="fa fa-stack-1x">2</i>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="item"> 
                    <div class="col-xs-2">
                        <a data-target="#myCarousel" data-slide-to="2">
                            <span class="fa-stack fa-3x">
                                <i class="fa fa-circle-o fa-stack-2x"></i>
                                <i class="fa fa-stack-1x">3</i>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="item"> 
                    <div class="col-xs-2">
                        <a data-target="#myCarousel" data-slide-to="3">
                            <span class="fa-stack fa-3x">
                                <i class="fa fa-circle-o fa-stack-2x"></i>
                                <i class="fa fa-stack-1x">4</i>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="item"> 
                    <div class="col-xs-2">
                        <a data-target="#myCarousel" data-slide-to="4">
                            <span class="fa-stack fa-3x">
                                <i class="fa fa-circle-o fa-stack-2x"></i>
                                <i class="fa fa-stack-1x">5</i>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="item"> 
                    <div class="col-xs-2">
                        <a data-target="#myCarousel" data-slide-to="5">
                            <span class="fa-stack fa-3x">
                                <i class="fa fa-circle-o fa-stack-2x"></i>
                                <i class="fa fa-stack-1x">6</i>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="item"> 
                    <div class="col-xs-2">
                        <a data-target="#myCarousel" data-slide-to="6">
                            <span class="fa-stack fa-3x">
                                <i class="fa fa-circle-o fa-stack-2x"></i>
                                <i class="fa fa-stack-1x">7</i>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="item"> 
                    <div class="col-xs-2">
                        <a data-target="#myCarousel" data-slide-to="7">
                            <span class="fa-stack fa-3x">
                                <i class="fa fa-circle-o fa-stack-2x"></i>
                                <i class="fa fa-stack-1x">8</i>
                            </span>
                        </a>
                    </div>
                </div>
            </div><!-- /.carousel-inner.row -->
            <a class="left carousel-control" href="#numberCarousel" data-slide="prev">
                <span class="icon-prev"></span>
            </a>
            <a class="right carousel-control" href="#numberCarousel" data-slide="next">
                <span class="icon-next"></span>
            </a>
        </div><!-- /#numberCarousel -->
        <div class="col-xs-12" id="carousel-bounding-box">
            <div class="carousel slide" id="myCarousel">
                <div class="carousel-inner">
                    <div class="active item" data-slide-title="Financial Derivatives - Lecture 01">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/KuJkFqBWpl0"></iframe>
                        </div>
                        <br />
                        <button type="button" class="btn btn-default">Crear apunte</button>
                        <button type="button" class="btn btn-default pull-right">Saltear a ejercicio</button>
                    </div>
                    <div class="item" data-slide-title="Financial Derivatives - Lecture 02">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/GXtxgzZkSZo"></iframe>
                        </div>
                        <br />
                        <button type="button" class="btn btn-default">Crear apunte</button>
                        <button type="button" class="btn btn-default pull-right">Saltear a ejercicio</button>
                    </div>
                    <div class="item" data-slide-title="Financial Derivatives - Lecture 03">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/aoUSUX2D5Is"></iframe>
                        </div>
                        <br />
                        <button type="button" class="btn btn-default">Crear apunte</button>
                        <button type="button" class="btn btn-default pull-right">Saltear a ejercicio</button>
                    </div>
                    <div class="item" data-slide-title="Financial Derivatives - Lecture 04">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/mgjBV9sWdIE"></iframe>
                        </div>
                        <br />
                        <button type="button" class="btn btn-default">Crear apunte</button>
                        <button type="button" class="btn btn-default pull-right">Saltear a ejercicio</button>
                    </div>
                    <div class="item" data-slide-title="Financial Derivatives - Lecture 05">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/orqUpKfSbrc"></iframe>
                        </div>
                        <br />
                        <button type="button" class="btn btn-default">Crear apunte</button>
                        <button type="button" class="btn btn-default pull-right">Saltear a ejercicio</button>
                    </div>
                    <div class="item" data-slide-title="Financial Derivatives - Lecture 06">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/joXhxg8MAyc"></iframe>
                        </div>
                        <br />
                        <button type="button" class="btn btn-default">Crear apunte</button>
                        <button type="button" class="btn btn-default pull-right">Saltear a ejercicio</button>
                    </div>
                    <div class="item" data-slide-title="Financial Derivatives - Lecture 07">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/2SSsaIt9LCk"></iframe>
                        </div>
                        <br />
                        <button type="button" class="btn btn-default">Crear apunte</button>
                        <button type="button" class="btn btn-default pull-right">Saltear a ejercicio</button>
                    </div>
                    <div class="item" data-slide-title="Financial Derivatives - Lecture 08">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/BJiEAU5OKiU"></iframe>
                        </div>
                        <br />
                        <button type="button" class="btn btn-default">Crear apunte</button>
                        <button type="button" class="btn btn-default pull-right">Saltear a ejercicio</button>
                    </div>
                </div><!-- /.carousel-inner -->
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="icon-prev"></span>
                </a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="icon-next"></span>
                </a>
            </div><!-- /#myCarousel -->
        </div><!-- /#carousel-bounding-box -->
    </div><!--/.row-->
</div><!--/.container-fluid-->

CSS：

#numberCarousel {
    padding: 40px;
}
#numberCarousel .carousel-inner {
    margin-left: 0;
}
#numberCarousel .item {
    text-align: center;
    cursor: pointer;
}
#numberCarousel .carousel-inner > .next {
  left: 16.66666667%;
}
#numberCarousel .carousel-inner > .prev {
  left: -16.66666667%;
}
#numberCarousel .carousel-inner > .next.left,
#numberCarousel .carousel-inner > .prev.right {
  left: 0;
}
#numberCarousel .carousel-inner > .active.left {
  left: -16.66666667%;
}
#numberCarousel .carousel-inner > .active.right {
  left: 16.66666667%;
}
.carousel-control.left, .carousel-control.right {
    background-image: none;
}
.carousel-control {
    width: 10%;
}
#numberCarousel .carousel-control .icon-prev, #numberCarousel .carousel-control .icon-next {
    transform: translate(0, -50%);
}

JS：

// Initalize the "slide" title
$('#carousel-text>h3').text($('#myCarousel .active').data('slide-title')); 

// Initalize the carousels setting the interval to none
// This could also be done by just setting the data-interval to 0 in the markup
$('#myCarousel, #numberCarousel').carousel({
     interval: 0
});

// Make the thumbnail slider increment one at at time
$('.carousel[data-type="multi"] .item').each(function () {
     var next = $(this).next();
     if (!next.length) {
         next = $(this).siblings(':first');
     }
     next.children(':first-child').clone().appendTo($(this));

     for (var i = 0; i < 4; i++) {
         next = next.next();
         if (!next.length) {
             next = $(this).siblings(':first');
         }

         next.children(':first-child').clone().appendTo($(this));
     }
});

// When the carousel slides, auto update the text
// and move the corresponding number slide to be active
$('#myCarousel').on('slid.bs.carousel', function () {
    activeslide = $(this).find('.active');
    $('#carousel-text>h3').text(activeslide.data('slide-title'));
    $('#numberCarousel').carousel(activeslide.index());
});

您有几个不需要的嵌套 div，这使您的标记更难遵循。另外，仅从简化的角度来看，“文本”或标题作为数据属性直接存储在“幻灯片”上。将这些信息存储在隐藏 div 中的标记中确实没有意义。将标题文本作为数据属性包含在内更加语义化和自然；更容易编码、维护和测试；并且不必多次返回 DOM 来更新页面上的文本。

主要的变化是使用 Bootstrap 轮播中的内置数据属性来控制当在数字轮播中单击其中一项时滑动主轮播。这是内置的功能。它不需要任何额外的 javascript，这意味着对您来说更少的开发、维护和测试（并且对于您的用户来说下载量会稍微小一些，即使它只有几个字节）。

最后，当点击下一个/上一个按钮时，要使数字轮播同步，因为每个轮播具有相同数量的项目以相同的顺序，您只需将数字轮播传递给活动幻灯片的索引主轮播。

【讨论】：

这是完美的。太感谢了。 :) 我从你的代码中学到了。代表活动幻灯片的数字是否可能出现在中间而不是开头？
我把$('#numberCarousel').carousel(activeslide.index());改成了$('#numberCarousel').carousel(activeslide.index()-2); :)
有可能，但目前numberCarousel中有6个元素，所以你心目中的中间位置应该是3还是4？也许问题是对您的用户来说更直观的是什么？给活动号码添加不同的颜色可能会更好？
是的，这就是这样做的方法，除了你需要一个 if 语句来处理小于 0 的数字。
是的。对于活动幻灯片，颜色也需要更改。