如何制作此类自举轮播

Question

hi my friend how are you i tried alot to do this type of carousel like 3 contain in one page but i couldnt do it this is my bootstrap code http://jsfiddle.net/esymm0gr/

one of my 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>

and i need to make three box in each time with carousel like this

how can i do that ? any help please or any name that help me to search by my self ? ?

Answer 1

Did and quick search and found quite a bit on how to do this easily. Here is an example I put together:

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");
});
});