多项旋转木马

Question

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

我试图添加

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

在/*lg*/的{​​{1}}部分（第72行下方），我也增加了css（第8行）的范围，就像这样

JS

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

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

但是这没有帮助，它只是在下一行中添加了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++) {。