Laravel的猫头鹰旋转木马，六列两列逻辑

Question

How to create logic for this structure?

[1, 2, 3]
[4, 5, 6]

I have photos showing in owl carousel. It should show six photos, three in two columns, and the next six photos should go in second slide, next six in third slide and so on...

When I do this:

<div class="row">
     @foreach($videos as $key => $video)
         @if(($key)%7==0)
            </div><div class="row">
         @endif
            <div class="col-md-4">
               <a id="videos" class="fancybox fancybox.iframe be-relative" href="http://www.youtube.com/embed/><span class="be-absolute"></span></a>
            </div>
     @endforeach
</div>

But, this gives me:

[1, 2, 3]
[3, 4, 5]

... and in second slide I have

[6, 7, 8]
[9, 10, 11]
[12, 13, 14]

... But this 12, 13, 14 should go into third slide.

Answer 1

The results you posted confuses me a little bit, because they don‘t seem to fit to your posted code (also "3" is the last element in the first and the first in the second row). Possible you mixed something up?

Based on your code and if $key really is a consecutive index (1, 2, 3, 4, ...), it should look like this:

First slide:
[1, 2, 3]
[4, 5, 6]

Second slide:
[ 7,  8,  9]
[10, 11, 12]
[13]

Third slide:
[14, 15, 16]
[17, 18, 19]
[20]

...

The essential problem is, that you add your separator before every 7th element, but actually want this to be added after every 6th. Sounds confusing and it totally is, but think about it and it will make sense. ;-)

This would be the first thing you need to change, but also I would suggest to use use the iteration-loop variable, that is provided by blade loops and contains the number of the current iteration, instead of the $key.

All in all this should work:

<div class="row">
     @foreach($videos as $video)
            <div class="col-md-4">
               <a id="videos" class="fancybox fancybox.iframe be-relative" href="http://www.youtube.com/embed/><span class="be-absolute"></span></a>
            </div>
            @if ((($loop->iteration % 6) == 0) && (!$loop->last))
                 </div><div class="row">
            @endif
     @endforeach
</div>

Hope that helps! If not feel free to add a message!