是否可以设置引导程序转盘,以便他一次只滑动一列?
假设我有一个带有两个项目的旋转木马,每个项目都是一行三列。我不想滑动到下一个项目,而是想移动到下一项目。这是引导程序标准的旋转木马,它一项接一项(因此,一次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>
知道怎么做吗?
试试这个。。。
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>