Wrong order calculation for multi-lines container

In case if not all lines are full filled up the Swiper generate wrong source number. For example you can try 16 items, slidesPerColumn: 3, slidesPerColumnFill: ‘column’ in case if 6 columns are visible. Proposed fix is (core.js, starting in line 515:)

        // Calc slides
        var slideSize;
        var slidesPerColumn = s.params.slidesPerColumn;
        var slidesPerRow = slidesNumberEvenToRows / slidesPerColumn;
        var numFullColumns = slidesPerRow - (s.params.slidesPerColumn * slidesPerRow - s.slides.length);
        for (i = 0; i < s.slides.length; i++) {
            slideSize = 0;
            var slide = s.slides.eq(i);
            if (s.params.slidesPerColumn > 1) {
                // Set slides order
                var newSlideOrderIndex;
                var column, row;
                if (s.params.slidesPerColumnFill === 'column') {
                    column = Math.floor(i / slidesPerColumn);
                    row = i - column * slidesPerColumn;
                    if (column > numFullColumns || (column==numFullColumns && row==slidesPerColumn-1)) {
                        if (++row>=slidesPerColumn) {
                            row=0;
                            column++;
                       }
                    }
                    newSlideOrderIndex = column + row * slidesPerRow;
                    slide
                        .css({
                            '-webkit-box-ordinal-group': newSlideOrderIndex,
                            '-moz-box-ordinal-group': newSlideOrderIndex,
                            '-ms-flex-order': newSlideOrderIndex,
                            '-webkit-order': newSlideOrderIndex,
                            'order': newSlideOrderIndex
                        });
                }
                else {
                    row = Math.floor(i / slidesPerRow);
                    column = i - row * slidesPerRow;

                }
                slide
                    .css({
                        'margin-top': (row !== 0 && s.params.spaceBetween) && (s.params.spaceBetween + 'px')
                    })
                    .attr('data-swiper-column', column)
                    .attr('data-swiper-row', row);

            }

…

Thank you, -=A=-

[petrusolofsson]

I have found a solution to this problem for my project. The problem seems to occur because of how CSS flexbox works with Swiper. It still fills the slides by row, and column is only simulated by using CSS order, so the last remaining items always show on the last row, instead of in the last column.

My solution is to calculate how many slides are missing to fill the whole grid, then append placeholder empty slides equal to number of missing slides to Swiper on init, and then Swiper will calculate and fill the columns correctly.

Code I’m using is here:

slidesPerView: 2,
slidesPerColumn: 4,
slidesPerGroup: 2,
onInit: function (swiper) {
    // Slides per column
    console.log('slidesPerColumn: ' + swiper.params.slidesPerColumn);
    // Total number of slides
    console.log('totalNumberOfSlides: ' + swiper.slides.length);
    // Slides outside even grid
    var slidesOutsideEvenGrid = swiper.slides.length % swiper.params.slidesPerColumn;
    console.log('slidesOutsideEvenGrid: ' + slidesOutsideEvenGrid);
    // Check if grid is totally filled
    if (slidesOutsideEvenGrid != 0) {
        console.log('not even grid');
        // Grid not totally filled, calculate slides needed to fill grid
        var slidesNeededToFillGrid = swiper.params.slidesPerColumn - slidesOutsideEvenGrid;
        console.log('slidesNeededToFillGrid: ' + slidesNeededToFillGrid);
        // Append as many empty placeholder slides needed to fill grid
        for (var i = 0; i < slidesNeededToFillGrid; i++) {
            swiper.appendSlide('<div class="swiper-slide"></div>');
        }
    }
}

Hope something like this can be implemented in core to solve the problem with filling columns correctly.

Live example can be found here: https://www.myresjohus.se/inspiration/hall/

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.