Реализация слайдера с множеством элементов на одном слайде

Question

Как реализовать слайдер, в котором отдельные элементы будут выстроены внутри, как на скриншоте.

Я использую карусель совы. В настоящее время у меня есть такая структура:

<div class="sample-slider-wrapper border-bottom-block owlcarousel">
    <div class="samples-items-wrapper">
        <div class="sample-item-wrapper">
            <img src="<?php echo $this->getViewFileUrl('Dv_BuildingBedPage::images/image3.png'); ?>" />
            <div class="pretty p-default">
                <input type="checkbox" />
                <div class="state">
                    <label></label>
                </div>
            </div>
        </div>
        <div class="sample-item-wrapper">
            <img src="<?php echo $this->getViewFileUrl('Dv_BuildingBedPage::images/image3.png'); ?>" />
            <div class="pretty p-default">
                <input type="checkbox" />
                <div class="state">
                    <label></label>
                </div>
            </div>
        </div>
        <div class="sample-item-wrapper">
            <img src="<?php echo $this->getViewFileUrl('Dv_BuildingBedPage::images/image3.png'); ?>" />
            <div class="pretty p-default">
                <input type="checkbox" />
                <div class="state">
                    <label></label>
                </div>
            </div>
        </div>
        <div class="sample-item-wrapper">
            <img src="<?php echo $this->getViewFileUrl('Dv_BuildingBedPage::images/image3.png'); ?>" />
            <div class="pretty p-default">
                <input type="checkbox" />
                <div class="state">
                    <label></label>
                </div>
            </div>
        </div>
        <div class="sample-item-wrapper">
            <img src="<?php echo $this->getViewFileUrl('Dv_BuildingBedPage::images/image3.png'); ?>" />
            <div class="pretty p-default">
                <input type="checkbox" />
                <div class="state">
                    <label></label>
                </div>
            </div>
        </div>
    </div>
</div>

В будущем элементы будут взяты из базы данных, но теперь я хочу, чтобы элементы на 1-м слайде не имели 6 элементов на мобильном телефоне и 16 элементов. элементы на рабочем столе.

В настоящее время у меня есть эта конфигурация:

    require([
        'jquery',
        'owlcarousel'
    ], function () {
        'use strict';
        jQuery(".owlcarousel").owlCarousel({
            items: 1,
            nav : false,
            pagination : false,
            dots: true
        })
    });

Теперь, если есть более 6 элементов, то они переносятся ниже, и это нарушает идею двухуровневой слайдер.

Вам нужно как-то перенести их на следующий слайд. Подскажите, как это реализовать. Конечный результат таков: