Bootstrap multicolumns传送带

Question

是否可以设置引导传送带，以便他一次只能滑动一列？

比方说，我有一个有两个项目的传送带，每个项目是一个三列的行。我不想滑到下一个项目，而是想转到下一个项目。这是自举标准传送带，逐项进行（因此，一次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> 

任何想法如何做到这一点？

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