Сова-карусель в Ларавеле, логика шесть в две колонки
Как создать логику для этой структуры?
[1, 2, 3]
[4, 5, 6]
У меня есть фотографии, показывающие в сове карусели. Он должен показывать шесть фотографий, три в двух столбцах, и следующие шесть фотографий должны идти на втором слайде, следующие шесть на третьем слайде и так далее …
Когда я делаю это:
<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>
Но это дает мне:
[1, 2, 3]
[3, 4, 5]
… и на втором слайде у меня есть
[6, 7, 8]
[9, 10, 11]
[12, 13, 14]
… Но эти 12, 13, 14 должны войти в третий слайд.
Решение
Результаты, которые вы опубликовали, меня немного смущают, потому что они не соответствуют вашему опубликованному коду (также «3» — последний элемент в первом и первый во втором ряду). Возможно, вы что-то перепутали?
На основании вашего кода и если $key действительно является последовательным индексом (1, 2, 3, 4, …), он должен выглядеть следующим образом:
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]
...
Основная проблема заключается в том, что вы добавляете свой разделитель перед каждым 7-м элементом, но на самом деле хотите, чтобы он добавлялся после каждого 6-го элемента. Звучит запутанно, и это действительно так, но подумайте об этом, и это будет иметь смысл. 😉
Это было бы первым, что вам нужно изменить, но я бы также предложил использовать iteration-loop переменная, которая предоставляется блейд-циклами и содержит номер текущей итерации вместо $key,
В целом это должно работать:
<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>
Надеюсь, это поможет! Если не можете добавить сообщение!
Другие решения
Вы должны разделить их на 6
@foreach( $videos->chunk(6) as $chunk)
<div class="row">
@foreach( $chunk 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>
@endforeach
</div>
@endforeach