javascript - 防止 SwiperJS 三重幻灯片

Question

我是使用 SwiperJS 的新手，并且有一个带有四张幻灯片的 swiper-container。尽管将循环设置为 false，但我仍不断获得带有三组重复幻灯片的 swiper-container。这是我的 swiper-container 的基础知识：

<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。

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

感谢您的任何意见。

标签： javascriptjquerycssswiperswiperjs