Swiper：我可以按行对元素进行排序和分组吗？

Question

我目前有这个代码

var swiper = new Swiper('.swiper-container', {
    spaceBetween: 32,
    slidesPerView: 2,
    slidesPerColumn: 2,
    slidesPerGroup: 2
});

我的幻灯片是这样排序的

|-----|-----|
|01 03|05 07|
|02 04|06 08|
|-----|-----|

现在我的问题是，是否可以将幻灯片作为一组从左到右排序，就像这样

|-----|-----|
|01 02|05 06|
|03 04|07 08|
|-----|-----|

slidesPerColumnFill: 'row' 不起作用，因为它会 "destroy" 实际组：

|-----|-----|
|01 02|03 04|
|05 06|07 08|
|-----|-----|

Answer 1

有同样的问题。我刚刚订购了我的元素并用 placeholder-elements.

填充了空白

我在这里使用这段代码（但请记住，我总是想要 3 行）：

function orderMultiSlideRows($slides, placeholder, SlidesPerView) {
    let slidesLength = $slides.length,
        numberLastSlides = slidesLength % (SlidesPerView * 3),
        slideGroups = Math.ceil(slidesLength / (SlidesPerView * 3)),
        numberSlidesSum = slideGroups * (SlidesPerView * 3),
        numberSlidesPerRow = numberSlidesSum / 3,
        numberFilledSlidesPerRow = numberSlidesPerRow - SlidesPerView,
        currentRealSliderIndex = 0,
        htmlList = '';

    for(let i = 0; i < numberSlidesSum; i++) {
        if(i % numberSlidesPerRow >= numberFilledSlidesPerRow) {
            if(numberLastSlides > 0) {
                htmlList += $slides.get(currentRealSliderIndex).outerHTML;
                currentRealSliderIndex++;
                numberLastSlides--;
            } else {
                htmlList += placeholder;
            }
        } else {
            if(currentRealSliderIndex < slidesLength) {
                htmlList += $slides.get(currentRealSliderIndex).outerHTML;
                currentRealSliderIndex++;
            } else {
                // this should never happen
                htmlList += placeholder;
            }
        }
    }
    return $(htmlList);
}

希望这对您有所帮助。为了清洁，您只需删除所有 Placeholder-Elements（带有 class 或其他东西）

Answer 2

它已在此处修复：https://github.com/nolimits4web/swiper/commit/88703faa525e49e468d38ca57d7345bdbee256ec 我可以确认它现在对我有用。

Swiper：我可以按行对元素进行排序和分组吗？

Swiper: Can I sort elements per row and grouped?

javascript

slider

swiper