javascript - 多元素轮播

Question

我有这个工作示例 Multi Item Carousel我有 4 个彼此相邻的元素(分辨率为 1200 像素或更高)，我想将其更改为 7 个较小的元素。

我已经尝试添加

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

在 css 的 /*lg*/ 部分(第 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++) { .