多项目轮播

Question

I have this working example Multi Item Carousel where I have 4 items next to each other (on resolution 1200px or more), and I would like to change it to 7 smaller items.

I have tried to add

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

in the /*lg*/ section in css (below line 72) and I also increased range in JS (line 8) like this

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

And also I added more items in html, so that I have 7

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

But that did not help, it just added 1 item + 2 when slide occurs, in the next row.

What am I missing?

Answer 1

Change the CSS in the /*lg*/ section to

@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; }
}

And change the JavaScript range to for (var i = 0; i < 7; i++) { .