Как создать собственный макет слайда с выравниванием по центру в Slick Slider для React? ⇐ CSS

[Anonymous]

Я использую библиотеку слайдеров в своем проекте React. Я хочу перемещать элементы, как показано на изображении ниже, но с помощью гладкого слайдера невозможно структурировать его таким образом. Если я установлю строки: 2, выравнивание будет одинаковым в обеих строках. введите сюда описание изображения

Код: Выделить всё

import React from "react";
import immobiliare from "assets/images/idealista_white.png";
import idealista from "assets/images/idealista_white.png";
import wikicisa from "assets/images/wikicisa_white.png";
import casa from "assets/images/casa_white.png";
import trovacasa from "assets/images/trovacasa_white.png";
import mioaffitto from "assets/images/mioaffitto_white.png";
import plusFiftyPortali from "assets/images/plus_fifty_portali.png";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";

const App = () => {
const settings = {
dots: false,
infinite: true,
speed: 500,
slidesToShow: 6,
slidesToScroll: 1,
rows: 2,
autoplay: false,
autoplaySpeed: 2000,
arrows: false,
};

return (



[img]{immobiliare} alt=[/img]

[img]{idealista} alt=[/img]

[img]{wikicisa} alt=[/img]

[img]{casa} alt=[/img]

[img]{trovacasa} alt=[/img]

[img]{mioaffitto} alt=[/img]

[img]{plusFiftyPortali} alt=[/img]

[img]{immobiliare} alt=[/img]

[img]{idealista} alt=[/img]

[img]{wikicisa} alt=[/img]

[img]{casa} alt=[/img]

[img]{trovacasa} alt=[/img]

[img]{mioaffitto} alt=[/img]

[img]{plusFiftyPortali} alt=[/img]



);
};

export default App;

Мой вопрос: каковы возможности структурировать элементы, как на изображении, и перемещать обе строки?
Заранее спасибо за проверку. Я очень ценю это!
Я пробовал использовать несколько строк, но структура элементов не такая, как мне хотелось. Выравнивание элементов в обеих строках одинаковое, но я хочу, чтобы выравнивание второй строки было по центру под первым элементом в первой строке. Я ожидал, что вторая строка сместится к центру под первым элементом, но этого не произошло. Вот ссылка на документацию, по которой я следовал: https://react-slick.neostack.com/docs/e ... tiple-rows

Мой вопрос: как можно Я структурирую элементы для достижения желаемого макета и соответственно перемещаю обе строки?

Подробнее здесь: https://stackoverflow.com/questions/786 ... slider-for