Centered slides, first slide partially hidden

[msneijders]

This is a (multiple allowed):

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: 3.4.2.

• Platform/Target and Browser Versions: Windows Chrome.

What you did

I wanted n number of slides. And if they fit horizontally in the viewport, I want them horizontally centered in the viewport. If they do not fit, you can swipe through all the slides.

I tried this by setting:

.slide-wrapper {
justify-content: center;
}

See https://jsfiddle.net/7kmeqjc2/

But if the slides do not fit and you swipe, the first slide is only partially visible.

Expected Behavior

I expect to see all slides completely when swiping.

Actual Behavior

The slides's offset is too far to the left and the first slide is not completely visible.

[bio]

Small workaround:

1. create new style

    .swiper-wrapper__center {
      justify-content: center;
      margin: 0 auto;
    }

2. add/remove swiper-wrapper__center class depending on prev/next buttons buttonDisabledClass

    var setWrapperStyles = function (swiper) {
      var wrapperCenterClass = 'swiper-wrapper__center'
      var buttonDisabledClass = swiper.params.buttonDisabledClass
      var wrapperEl = swiper.wrapper[0]

      if (swiper.prevButton[0].classList.contains(buttonDisabledClass)
        && swiper.nextButton[0].classList.contains(buttonDisabledClass)
      ) {
        // center slides
        wrapperEl.classList.add(wrapperCenterClass)
      } else {
        wrapperEl.classList.remove(wrapperCenterClass)
      }
    }

    var slider = new Swiper('.js-swiper-slider', {
      slidesPerView: 'auto',
      spaceBetween: 10,
      grabCursor: true,
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      onInit: function (swiper) {
        setTimeout(function() {
          setWrapperStyles(swiper)
        }, 200)
      },
      onAfterResize: setWrapperStyles
    })

[lock]

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.