Как сделать горизонтальный слайдер с вертикальными миниатюрами?

Question

[pavlikmd]

Здравствуйте, есть макет в котором в блоке "Руководство" выводится по 4 человека, снизу есть стрелочки переключения, при клике на стрелочку вправо должны показываться следующие 4 человека. Думал попробовать с owl-carousel, но как-то не получалось.
Придумал три пути решения:
1) Как-то циклом сделать так чтобы каждые 4 статьи были обернуты в div блок с классом "slide" (но мне кажется это не реально)
2) Может есть какая-та функция в owl-carousel чтобы этих 4 человека отображались не горизонтально а вертикально
3) Подключить вообще другой скрипт который может реализовать такое

Answer 1

[WP Panda]

1. Почему не реально?
добавьте в цикл счетчик и делите по модулю значение счетчика в каждой итерации на 4

Comments

[pavlikmd]

приведите примеры, как это сделать?

[WP Panda]

pavlikmd: Разные размеры миниатюр на главной странице?

[pavlikmd]

WP Panda: все равно не могу понять принцип кода, можете разжевать мне, как мне сделать так чтобы каждых 4 поста заключались в отдельный див, след 4 поста также заключались в див с таким же классом и так далее ?

[WP Panda]

pavlikmd:

<?php
 
$array = array(
	's1','s2','s3','s4','d1','d2','d3','d4','t1','t2','t3','t4'
	);
	$n = 0;
	echo '<div>';
	foreach($array as $item ) {
 
		if( $n%4 === 0 && $n !== 0 ) {
			echo '</div><div>';
		}
	echo $item . ' ';
 
	$n++;	
	}
 
	echo '</div>';

ideone.com/3Y2WAF