Как сделать две независимые оболочки для двух слайдов в одном слайдере Swiper?

Question

[Чингиз Гусейнов]

Добрый день!
Хочу реализовать такой слайдер.
Идея в том, чтобы слайдер был один, выводились два слайда из общего потока слайдов и каждый из слайдов имел свою оболочку. В качестве инструменты для реализации слайдера использую Swiper-slider.

На текущий момент по коду все стандартно. Пытался назначить слайдам overflow: hidden; но это очевидно не сработало...

Заранее спасибо всем, кто что-то дельное подскажет.

<div class="swiper">
        <div class="swiper-wrapper ">
            <div class="swiper-slide">
                <img src="./assets/images/category-1.jpg" />
            </div>
            <div class="swiper-slide">
                <img src="./assets/images/slider.jpg" />
            </div>
        </div>
 </div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

const swiper = new Swiper('.swiper', {
        slidesPerView: 2,
        slidesPerGroup: 2,
        loop: true,
        navigation: {
            nextEl: '.swiper-button-prev',
            prevEl: '.swiper-button-next',
        },
    });