Bootstrap 3旋转木马与多个项目 [英] Bootstrap 3 carousel with multiple items

问题描述

我已经使用 Bootstrap3 将多个项目轮播实施为此演示中显示 。它一次显示4个项目。

我该如何改变它？我想每次显示5或6个项目。

解决方案

需要进行多项更改：

在JS中更改 i <2 至 i <3 ）或 i <4 （将显示6个）
$ b 在HTML中更改您的< ; div class =col-md-6 col-md-offset-3> 将容纳更多单元格，例如< div class =col -md-10 col-md-offset-1> 。 （这是可选的，但在我看来，col-md-6中有6个看起来非常紧密）

更改 col-md-3 到 col-md-2 。请注意，这只会在中分辨率和大分辨率屏幕上更改轮播。要调整 sm 和 xs 的宽度，您需要调整 col col-sm 和 col-xs

然后在你的CSS中将25％（ 100％/ 4 ）改为16.7％（ 100％/ 6 ）。如果你想要5，你会改变这个20％。

  @media（min-width：992px）{
 .carousel-inner .active.left {left：-16.7％; } 
 .carousel-inner .next {left：16.7％; } 
 .carousel-inner .prev {left：-16.7％; } 
} 
  

更新了Bootply，其中有6个

I have implemented a multiple item carousel using Bootstrap3 as shown in this demo. It displays 4 items at a time.

How can I change that? I'd like to show 5 or 6 items at a time.

解决方案

Multiple changes are needed:

In JS change i<2 to i<3 (will display 5 across) or i<4 (will display 6 across)

In HTML change your <div class="col-md-6 col-md-offset-3"> to something that will accomodate more cells, for example <div class="col-md-10 col-md-offset-1">. (This is optional, but 6 across in a col-md-6 looks pretty tight in my opinion)

Change col-md-3 to col-md-2. Note that this will change the carousel only on medium and large resolution screens. To adjust the width on sm and xs you would need to adjust the col sizes for col-sm and col-xs

Then in your CSS change to accodomate for 6 across in the animation by changing 25% (100%/4) to 16.7% (100%/6). If you want 5 across, you would change this to 20%.

@media (min-width: 992px ) {
    .carousel-inner .active.left { left: -16.7%; }
    .carousel-inner .next        { left:  16.7%; }
    .carousel-inner .prev        { left: -16.7%; }  
}

Updated Bootply with 6 across

这篇关于Bootstrap 3旋转木马与多个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！