0
是否可以設置引導傳送帶,以便他一次只能滑動一列?Bootstrap multicolumns傳送帶
比方說,我有一個有兩個項目的傳送帶,每個項目是一個三列的行。我不想滑到下一個項目,而是想轉到下一個項目。這是自舉標準傳送帶,逐項進行(因此,一次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>
任何想法如何做到這一點?