I see you're working with Swiper 4.2.6 and hitting a snag with centering slides when their total width doesn't fill the container. Let's work through this—since the default centeredSlides: true only activates when slides overflow the container, we need a bit of extra logic to handle this edge case.

Your Current Configuration #

First, let's recap your setup for context:

const options = {
    wrapperClass: 'slides-list',
    slideClass: 'slide',
    centeredSlides: true,
    slidesPerView: 'auto', // Default slides per view
    spaceBetween: 20,
    loop: false,
    navigation: {
        prevEl: '.slider_btn--prev',
        nextEl: '.slider_btn--next'
    },
    pagination: {
        el: '.slider_pagination',
        clickable: true,
    },
    speed: 300,
    on: {
        init: function () {
            console.log('swiper initialized');
        },
    }
};

The Root Issue #

When the combined width of all slides (plus spaceBetween gaps) is smaller than your Swiper container's width, Swiper doesn't apply centering automatically. It assumes no scrolling is needed, so it left-aligns the slides by default.

Practical Solutions #

Here are two reliable approaches tailored for Swiper 4.2.6:

Method 1: Dynamic Centering via Swiper Events

We’ll check the total slide width on initialization and window resize, then apply inline styles to center the wrapper if needed. This works seamlessly for both static and responsive layouts:

Update your on callback in the options and add a helper function:

const options = {
    // ... your existing config ...
    on: {
        init: function () {
            console.log('swiper initialized');
            centerSlidesIfNeeded(this);
        },
        resize: function () {
            centerSlidesIfNeeded(this);
        }
    }
};

// Helper to handle centering logic
function centerSlidesIfNeeded(swiper) {
    const containerWidth = swiper.el.offsetWidth;
    let totalSlidesWidth = 0;

    // Calculate total width of all slides including spacing
    swiper.slides.forEach((slide, index) => {
        totalSlidesWidth += slide.offsetWidth;
        if (index < swiper.slides.length - 1) {
            totalSlidesWidth += swiper.params.spaceBetween;
        }
    });

    if (totalSlidesWidth < containerWidth) {
        // Center the wrapper
        swiper.wrapperEl.style.marginLeft = 'auto';
        swiper.wrapperEl.style.marginRight = 'auto';
        swiper.wrapperEl.style.width = `${totalSlidesWidth}px`;
    } else {
        // Reset styles when slides overflow the container
        swiper.wrapperEl.style.marginLeft = '';
        swiper.wrapperEl.style.marginRight = '';
        swiper.wrapperEl.style.width = '';
    }
}

Method 2: CSS Flexbox (Simpler, with Caveats)

If you’re confident slides will never exceed the container width (or can pair this with media queries), use flexbox on the Swiper container:

/* Target your Swiper container */
.swiper-container {
    display: flex;
    justify-content: center;
}

/* Prevent the wrapper from shrinking unexpectedly */
.slides-list {
    flex-shrink: 0;
}

Heads up: This might break normal scrolling behavior if slides do end up overflowing the container. Use it only for fixed-width scenarios or add media queries to disable flexbox on larger screens.

Quick Tips #

• Ensure your Swiper container has a defined width (either explicit or inherited from its parent) so the centering logic works correctly.
• Test both approaches to see which aligns better with your layout and responsive needs.

内容的提问来源于stack exchange，提问作者Héctor León