Question

嗨，我的朋友你好吗？我尝试了很多这样的旋转木马像3包含在一个页面，但我无法做到这一点这是我的引导代码 http://jsfiddle.net/esymm0gr/

我的一个div

<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>

我需要每次用旋转木马制作三个盒子 like this

我该怎么做？请帮忙或任何帮助我自己搜索的名字？？

Answer 1

做了快速搜索，发现了很多关于如何轻松完成这项工作的信息。这是我放在一起的一个例子：

http://jsfiddle.net/esymm0gr/3/

HTML：

<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>

JQuery的：

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

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

如何制作这种类型的bootstrap轮播

1 个答案: