在一个页面上链接两个Bootstrap Carousels

Question

我有一个有趣的案例，我想在一个页面上有两个旋转木马，另一个旋转木马控制另一个旋转木马 请参阅http://jsbin.com/bozenixiriko/1/

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

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

Answer 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，这意味着更少的开发，维护和测试（对于您的用户来说，下载量稍微小一点，即使它只有几个字节）。

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