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'不起作用，因为它会“破坏”实际的群组：

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

Answer 1

有相同的问题。我只是对元素进行排序，并用占位符元素填充空白。

我在这里使用此代码（但请记住，我一直想要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);
}

希望这会有所帮助。为了清洁，您只需删除所有占位符元素（带有类或类似内容）

Answer 2

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

刷卡器：我可以按行对元素进行排序并进行分组吗？

2 个答案: