使用swiper-master脚本时如何将li元素调整为参考图的上下排列布局

实现思路 #

不改动swiper全局运行规则，仅将前2个slide封装为1个swiper可识别的独立slide单元，对该单元内部使用flex纵向布局实现上下排列，其他slide完全保留原有布局逻辑，不会影响swiper原有滑动、计数等规则。

完整修改代码 #

HTML代码 #

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- 前两个slide封装为独立swiper-slide单元 -->
        <div class="swiper-slide double-slide-wrapper">
            <div class="inner-slide">li 1</div>
            <div class="inner-slide">li 2</div>
        </div>
        <!-- 后续slide保持原有结构不变 -->
        <div class="swiper-slide">li 3</div>
        <div class="swiper-slide">li 4</div>
        <div class="swiper-slide">li 5</div>
        <div class="swiper-slide">li 6</div>
        <div class="swiper-slide">li 7</div>
        <div class="swiper-slide">li 8</div>
    </div> 
</div>

CSS代码 #

在原有CSS基础上新增以下自定义样式即可，原有swiper全局样式无需修改：

/* 双slide容器，纵向排列内部元素 */
.double-slide-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px; /* 可自行调整上下两个元素的间距 */
    padding: 0;
    background: transparent;
}
/* 内部子slide样式，等分容器高度 */
.inner-slide {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

JS代码 #

原有JS代码完全无需修改，保持现有配置即可：

var swiper = new Swiper('.swiper-container', {
    direction: 'horizontal',
    slidesPerView: 4,
    spaceBetween: 4, 
    freeMode: true,
    mousewheel: true, 
});

效果说明 #

• swiper会将封装好的双slide单元识别为1个普通slide，原有的slidesPerView:4、间距等配置完全生效
• 仅li1和li2为上下排列，li3到li8完全保持原有横向单个排列的规则
• 不影响swiper的滑动、鼠标滚轮等所有交互功能

内容的提问来源于stack exchange，提问作者Yeppeuda