在一张幻灯片上实现包含多个项目的滑块

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>

将来，元素将从数据库中获取，但是现在，我希望第一张幻灯片上的元素在移动设备上没有6个项目，在台式机上没有16个项目。

我目前具有以下配置：

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

现在，如果元素多于6个，则将它们转移到下面，这打破了两级滑块的想法。

您需要以某种方式将它们转移到下一张幻灯片。告诉我如何实施。 最终结果是这样的：