多项旋转木马

Question

我有这个工作示例Multi Item Carousel，其中我有4个项目彼此相邻（分辨率1200px或更高），我想将其更改为7个较小的项目。

我试过补充一下

.active > div:first-child + div + div + div + div { display:block; } 

在/*lg*/的css部分（72行以下），我也增加了JS（第8行）的范围

for (var i = 0; i < 4; i++) {

而且我在html中添加了更多项目，所以我有7个

<div class="item">
    <div class="carousel-col">
        <div class="block yellow img-responsive"></div>
    </div>
</div>

但这并没有帮助，它只是在下一行中添加了1项+ 2当幻灯片发生时。

我错过了什么？

Answer 1

将/*lg*/部分中的CSS更改为

@media (min-width: 1200px) {
  .carousel-inner .active.left { left: -14.28%; }
  .carousel-inner .active.right{ left:  14.28%; }
  .carousel-inner .next        { left:  14.28%; }
  .carousel-inner .prev        { left: -14.28%; }
  .carousel-col                { width: 14.28%; }
  .active > div:first-child + div { display:block; }
  .active > div:first-child + div + div { display:block; }
  .active > div:first-child + div + div + div { display:block; }
  .active > div:first-child + div + div + div + div{ display:block; }
  .active > div:first-child + div + div + div + div + div{ display:block; }
  .active > div:first-child + div + div + div + div + div + div + div { display:block; }
}

并将JavaScript范围更改为for (var i = 0; i < 7; i++) {。