Bootstrap multicolumns旋转木马

时间：2015-12-02 11:36:03

标签： twitter-bootstrap carousel

是否可以设置bootstrap carousel以便他一次只滑动一列？

假设我有一个带有两个项目的旋转木马，每个项目都是一行，有三列。我没有滑到下一个项目，而是想转到下一个项目。这是bootstrap标准轮播，逐项进行（因此，每次3列）。

<div id="quotesCarousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <div class="container">
                     <div class="row">
                        <div class="col-sm-4 item">
                            <p class="quote font-romans"><i>"{{ 'comments.comment1'|trans }}"</i></p>
                            <div class="quote-logo">
                                <a href="">Link</a>
                            </div>
                        </div>
                        <div class="col-sm-4 item">
                            <div class="separator-dot-left"></div>
                            <div class="separator-dot-right"></div>
                            <p class="quote font-romans"><i></i></p>
                            <div class="quote-logo">
                                <a href="">Link</a>
                            </div>
                        </div>
                        <div class="col-sm-4 item">
                            <p class="quote font-romans"><i>"{{ 'comments.comment3'|trans }}"</i></p>
                            <div class="quote-logo">
                                <a href="">Link</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-4">
                            <p class="quote font-romans"><i>"{{ 'comments.comment4'|trans }}"</i></p>
                            <div class="quote-logo">
                                <a href="">Link</a>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="separator-dot-left"></div>
                            <div class="separator-dot-right"></div>
                            <p class="quote font-romans"><i></i></p>
                            <div class="quote-logo">
                                <a href="">Link</a>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <p class="quote font-romans"><i>"{{ 'comments.comment6'|trans }}"</i></p>
                            <div class="quote-logo">
                                <a href="">Link</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a class="carousel-control left" href="#quotesCarousel" role="button" data-slide="prev">
            <img height="30" width="30" class="arrow" src="{{ asset('bundles/app/img/icons/arrow-left.svg') }}">
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control right" href="#quotesCarousel" role="button" data-slide="next">
            <img height="30" width="30" class="arrow" src="{{ asset('bundles/app/img/icons/arrow-right.svg') }}">
            <span class="sr-only">Next</span>
        </a>
    </div>

我试过这个（让每一列成为一个项目），但这不起作用，它只是同时显示所有列：

<div id="quotesCarousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
            <div class="container">
                <div class="row">
                    <div class="col-sm-4 item">
                        <p class="quote font-romans"><i>"{{ 'comments.comment1'|trans }}"</i></p>
                        <div class="quote-logo">
                                <a href="">Link</a>
                        </div>
                    </div>
                    <div class="col-sm-4 item">
                        <div class="separator-dot-left"></div>
                        <div class="separator-dot-right"></div>
                        <p class="quote font-romans"><i></i></p>
                        <div class="quote-logo">
                                <a href="">Link</a>
                        </div>
                    </div>
                    <div class="col-sm-4 item">
                        <p class="quote font-romans"><i>"{{ 'comments.comment3'|trans }}"</i></p>
                        <div class="quote-logo">
                                <a href="">Link</a>
                        </div>
                    </div>
                    <div class="col-sm-4 item">
                        <p class="quote font-romans"><i>"{{ 'comments.comment4'|trans }}"</i></p>
                        <div class="quote-logo">
                                <a href="">Link</a>
                        </div>
                    </div>
                    <div class="col-sm-4 item">
                        <div class="separator-dot-left"></div>
                        <div class="separator-dot-right"></div>
                        <p class="quote font-romans"><i></i></p>
                        <div class="quote-logo">
                                <a href="">Link</a>
                        </div>
                    </div>
                    <div class="col-sm-4 item">
                        <p class="quote font-romans"><i>"{{ 'comments.comment6'|trans }}"</i></p>
                        <div class="quote-logo">
                                <a href="">Link</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

知道怎么做吗？

1 个答案:

答案 0 :(得分：-1)

试试这个...

jsfiddle 

$('#carousel-example-generic').carousel({wrap: true});
.carousel.slide img {
    width:100%;
    height:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<div id="carousel-example-generic" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
       <!-- Slide -->
    <div class="item active">
        <div class="row">
            <div class="col-sm-3 col-xs-6">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
        </div>
    </div>
       <!-- Slide -->
    <div class="item">
        <div class="row">
            <div class="col-sm-3 col-xs-6">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
        </div>
    </div>
       <!-- Slide -->
    <div class="item">
        <div class="row">
            <div class="col-sm-3 col-xs-6">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
        </div>
    </div>

</div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
  </a>

相关问题
最新问题