Javascript 如何制作这种类型的引导转盘

嗨，我的朋友，你好吗 我试了很多次做这种旋转木马，比如在一个页面中包含3个内容，但我做不到 这是我的引导代码

我的一个部门

<div class="col-md-3 col-sm-6 hero-feature">
    <div class="thumbnail">
        <img src="http://placehold.it/800x500" alt="">
        <div class="caption">
            <h3>Feature Label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <p>
                <a href="#" class="btn btn-primary">Buy Now!</a> <a href="#" class="btn btn-default">More Info</a>
            </p>
        </div>
    </div>
</div>

功能标签
Lorem ipsum dolor sit amet，奉献精英

我每次需要用旋转木马做三个盒子

我该怎么做？需要帮忙吗

---

或者任何有助于我自己搜索的名字

进行了快速搜索，并找到了很多关于如何轻松完成此任务的方法。下面是我总结的一个例子：

HTML:

---

查看carousel的文档，看看您缺少了什么：

<div class="container">
<div class="col-md-12">
     <h1>Bootstrap 3 Thumbnail Slider</h1>

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

            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="item active">
                    <div class="row">
                        <div class="col-sm-4"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
                        </div>
                        <div class="col-sm-4"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
                        </div>
                        <div class="col-sm-4"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
                        </div>

                    </div>
                    <!--/row-->
                </div>
                <!--/item-->
                <div class="item">
                    <div class="row">
                        <div class="col-sm-4"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                        </div>
                        <div class="col-sm-4"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                        </div>
                        <div class="col-sm-4"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                        </div>

                    </div>
                    <!--/row-->
                </div>
                <!--/item-->
                <div class="item">
                    <div class="row">
                        <div class="col-sm-4"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                        </div>
                        <div class="col-sm-4"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                        </div>
                        <div class="col-sm-4"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                        </div>

                    </div>
                    <!--/row-->
                </div>
                <!--/item-->
            </div>
            <!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>

            <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
        </div>
        <!--/myCarousel-->
    </div>
    <!--/well-->
</div>
</div>

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

$('#myCarousel').on('slid.bs.carousel', function() {
    //alert("slid");
});
});