javascript - Swiper - How center slides if the total slides width fit in the container width - Stack Overflow

admin管理员组

文章数量:1415139

"swiper": "^4.2.6"

Swiper demo

Swiper repository

Hello, I have this slider setup:

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');
        },
      }
    };

So i have this setup. Black border for the slider wrapper, red border for the slides list.

Works fine on mobile

But lets face the moment when all the slides width can fit into the slider wrapper, how can i centered then and maybe disable the drag option.

I dont know the slides widths, so right now in the example i have just 3 slides and this is the current behavior

And this one would be the desired one

I cannot use media queries because i dont know when the slides gonna fit in the container. so, Swiper has someway to achieve this ? Thanks in advance.

I dont want to use slidesPerView: 3, as i said, the point is to be able to check all the slides that we have, then if all of them can fit in the container, center them. Not to force X number of slides into the view

"swiper": "^4.2.6"

Swiper demo

Swiper repository

Hello, I have this slider setup:

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');
        },
      }
    };

So i have this setup. Black border for the slider wrapper, red border for the slides list.

Works fine on mobile

But lets face the moment when all the slides width can fit into the slider wrapper, how can i centered then and maybe disable the drag option.

I dont know the slides widths, so right now in the example i have just 3 slides and this is the current behavior

And this one would be the desired one

I cannot use media queries because i dont know when the slides gonna fit in the container. so, Swiper has someway to achieve this ? Thanks in advance.

I dont want to use slidesPerView: 3, as i said, the point is to be able to check all the slides that we have, then if all of them can fit in the container, center them. Not to force X number of slides into the view

• javascript
• slide
• swiper.js

Share Improve this question Follow edited May 4, 2018 at 10:00 Héctor León asked May 4, 2018 at 9:02 Héctor LeónHéctor León 2,41022 gold badges2727 silver badges4040 bronze badges 6

• If all fit into the container the slider will not have any purpose, yeah ? Then why use a slider ? – Thirueswaran Rajagopalan Commented May 4, 2018 at 9:26
• @ThirueswaranRajagopalan exactly, i need the slider until all fit the container, i'm asking for a way to do that when the slides number & width is unknown – Héctor León Commented May 4, 2018 at 9:30
• Did you check on Multiple Slides Per View and Centered Slides in the demo page you have linked above. – Thirueswaran Rajagopalan Commented May 4, 2018 at 9:38
• @ThirueswaranRajagopalan i already have the centered slide property added at the top, and the slides per view is not what i want, because i dont know the width of the slides, i dont wanna show 3 or 4 per view, i want to show as many as possible, and if all can be shown, then center them. – Héctor León Commented May 4, 2018 at 9:58
• @HéctorLeón – Wondering if you solves this issue. I'm looking for a smiliar solution, although I'm fine with setting slidesPerView, but still can't get to center all the slides, once they fit. – katerlouis Commented Jun 8, 2020 at 10:18

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 3

Javascript

const slider = new Swiper(element, {
  slidesPerView: 'auto',
  watchOverflow: true
});
    
slider.on('resize', function (instance) {
  element.classList.toggle('.slider-active', instance.virtualSize > instance.size);
});

CSS

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

.slider-active .swiper-wrapper {
  justify-content: normal;
}

This way you apply css to center the slides when te slide wrapper does not overflow the container. And visa versa to reset

本文标签： javascriptSwiperHow center slides if the total slides width fit in the container widthStack Overflow