Swiper: можно ли сортировать элементы по строкам и группировать? - PullRequest
Новая
       25

Swiper: можно ли сортировать элементы по строкам и группировать?

1 голос
/ 15 мая 2019

У меня в настоящее время есть этот код 

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

1 Ответ

0 голосов
/ 23 июля 2019

есть такая же проблема.Я просто заказал свои элементы и заполнил пустые места заполнителями-элементами.

Я использую этот код здесь (но имейте в виду, я всегда хочу 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 (с классом или чем-то)

...