Как такое реализовать в slick?

Question

[Programmir]

У меня 11 блоков. По макету видны 4 блока - такой блок квадратик, 2 элемента снизу и 2 сверху. И соответственно внизу три точки. Как сделать, чтобы элементы были видны в таком положении? Пробовал делать правки в css, всё съезжает. А с нуля писать, используя css3, для меня сложновато будет.

Comments

[Programmir]

В принципе, можно продублировать код, сделать три div. Этот элемент прятать при большом разрешении, а при маленьком уже показывать в слайдере. Но думаю, что дублировать код является плохой практикой.

[Александр Белькевич]

Покажи макет, как это выглядит)

[Programmir]

Александр Белькевич, а че показывать-то? Понятно же на словах. Представь, 2 квадратика сверху и 2 квадратика снизу (4 квадрата), а всего квадратиков 11. И три точки внизу, один квадратик состоит из 4 квадратиков, листаем три блока из 4 квадратов.

[Александр Белькевич]

Programmir, Ну и представь, что у тебя 4 квадрата - это один слайд. Запихивай их в один div

[Programmir]

Александр Белькевич, вот я и говорил про дублирование кода. При большом разрешении на макете 6 блоков сверху и 5 снизу, там слайдера нет. Его я подумал скрыть при маленьком разрешении и показывать дублированный код, где 4 квадрата в одном div. А при ещё меньшем разрешении мне надо показывать только один элемент со слайдом. Значит, надо скрыть див с 4 квадратами и снова показать предыдущий див и выводить по одному элементу. И я думал, как это сделать без дублирования кода.