防止 SwiperJS 将幻灯片复制三倍

如何解决防止 SwiperJS 将幻灯片复制三倍

我刚开始使用 SwiperJS，并且有一个带有四张幻灯片的 swiper-container。尽管将 loop 设置为 false，但我仍然使用三组重复幻灯片获取 swiper-container。这是我的 swiper 容器的基础知识：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="smb-card-content" id="card01">
                <div class="smb-card-header"><span>Header</span></div>
                <div class="smb-card-body">
                    <div class="smb-card-title">
                        <h5>Title</h5>
                    </div>
                    <p class="smb-card-text">Body content</p>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="smb-card-content" id="card02">
                <div class="smb-card-header"><span>Header</span></div>
                <div class="smb-card-body">
                    <div class="smb-card-title">
                        <h5>Title</h5>
                    </div>
                    <p class="smb-card-text">Body content</p>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="smb-card-content" id="card03">
                <div class="smb-card-header"><span>Header</span></div>
                <div class="smb-card-body">
                    <div class="smb-card-title">
                        <h5>Title</h5>
                    </div>
                    <p class="smb-card-text">Body content</p>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="smb-card-content" id="card04">
                <div class="smb-card-header"><span>Header</span></div>
                <div class="smb-card-body">
                    <div class="smb-card-title">
                        <h5>Title</h5>
                    </div>
                    <p class="smb-card-text">Body content</p>
            </div>
        </div>
    </div>
</div>

我定制的 JavaScript 是这样的：

const swiper = new Swiper('.swiper-container',{
    spaceBetween: 30,loop: false,});

这是 Swiper 特定的 CSS：

.swiper-container {
    max-width: 1220px!important;    
}

.swiper-slide {
    text-align: center;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-Box;
    border: none;
    border-radius: 0;
    height: 578px;
    width: 287px !important;
    border: 1px solid #f5f5f5;
    justify-content: space-around;
}

我们正在使用 AEM，因此该页面上可能继承了 SliderJS JavaScript，但似乎我的 const JS 脚本足以为该特定页面自定义 SwiperJS。

如何配置它以便我只在桌面上显示 swiper-slide 幻灯片，而只有在较小的设备上查看时才需要 swiper 功能？一年前，我们会包装 div，但现在我们需要让它们“可滑动”。

感谢您的任何意见。