Jquery 推特引导旋转木马，里面有一个大项目和5个小缩略图

所以基本上我需要做到的是：

一个引导库显示1个项目，同时滚动1个项目，但同时我们可以看到下一个图像或在这个大图像下的上一个图像。我们看到6个小尺寸的缩略图随着大图像一起滑动。箭头应该放在所有事物的中间，而不仅仅是大图的中间。

我从默认的引导转盘代码开始，但在这一点上得到了叠加。有什么解决办法吗

<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 src="..." alt="...">
            <div class="carousel-caption">
                ...
            </div>
        </div>
        <div class="item">
            <img src="..." alt="...">
            <div class="carousel-caption">
                ...
            </div>
        </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>

...
...
...

您可以使用引导引导指南，其中介绍了如何制作滑块，该指南附带了一个小的项目符号菜单，您可以将其更改为图像，而不是项目符号

---

先尝试一下你自己，然后粘贴你的实际尝试。

在花了几个小时完成这件事后，我成功了，我非常高兴

这是我的html代码：

<div style="width: 400px; margin: 0px auto;">

    <div id="myCarouselBig" class="carousel slide">

        <div class="carousel-inner">
            <div class="item active">
                <div class="col-xs-12"><a href="#"><img src="http://placehold.it/500/bbbbbb/fff&amp;text=1" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-xs-12"><a href="#"><img src="http://placehold.it/500/CCCCCC&amp;text=2" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-xs-12"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-xs-12"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-xs-12"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=5" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-xs-12"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a></div>
            </div>
        </div>

        <a class="left carousel-control" href="#myCarouselBig" 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="#myCarouselBig" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <div id="myCarousel" class="carousel slide">

        <div class="carousel-inner">
            <div class="item active">
                <div class="col-xs-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/bbbbbb/fff&amp;text=1" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-xs-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/CCCCCC&amp;text=2" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-xs-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-xs-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-xs-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=5" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-xs-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a></div>
            </div>
        </div>

        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev" style="display: none;">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next" style="display: none;">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

</div>

$('#myCarousel').carousel({
    interval: 10000
})

$('#myCarousel.carousel .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<3; i++) {

        next=next.next();

        if (!next.length) {
            next = $(this).siblings(':first');
        }

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

$('#myCarouselBig').on('slide.bs.carousel', function (event) {
    if (event.direction == 'left') $('#myCarousel').carousel('next');
    else {
        $('#myCarousel').carousel('prev');
        $('#myCarousel').carousel('pause');
    }
})

#myCarousel .carousel-inner > .next.left, #myCarousel .carousel-inner > .prev.right {
    left: 0 !important;
}

#myCarousel .carousel-inner .active.left  { left: -20%;             }
#myCarousel .carousel-inner .active.right { left: 20%;              }
#myCarousel .carousel-inner .next         { left: 20%               }
#myCarousel .carousel-inner .prev         { left: -20%              }
#myCarousel .carousel-control.left        { background-image: none; }
#myCarousel .carousel-control.right       { background-image: none; }
#myCarousel .carousel-inner .item         { background: white;      }

这是你的电话号码

---

注意：该片段包含两个引导转盘，一个带有大图像，另一个带有5个小缩略图。两个旋转木马链接在一起，这意味着每次触发主旋转木马时，另一个将向左或向右滑动。正如你已经知道的，bootstrap不支持5列，但是我做了一个修改，在每张图片中添加了20%的widh，即使我首先使用了col-xs-3类。在css中，您可以找到一个左：0！重要条件。这是一个黑客巫婆，我花了将近3个小时才发现，如果没有它，缩略图旋转木马效果会崩溃。你不必错过的另一个技巧是像我在css中做的那样为项目添加背景色，因为在某些情况下，图像可能看起来很奇怪，如果项目包含文本，那么文本可能看起来很粗体。目前，如果你按下小图片，什么都不会发生，但我计划在未来几天开发它，我可能也会用它更新此代码。

我看不出你在哪里卡住了，你发布的代码只是复制和粘贴的伪bootstarp代码