Swiper - как центральные слайды, если общая ширина слайдов вписывается в ширину контейнера - PullRequest
Новая
       54

Swiper - как центральные слайды, если общая ширина слайдов вписывается в ширину контейнера

0 голосов
/ 04 мая 2018 
"swiper": "^4.2.6"

Swiper demo

Хранилище Swiper

Здравствуйте, У меня есть эта установка слайдера: 

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

Итак, у меня есть эта настройка. Черная рамка для обертки слайдера, красная рамка для списка слайдов .

Отлично работает на мобильном телефоне

enter image description here

Но давайте посмотрим правде в глаза, когда вся ширина слайдов может поместиться в оболочку слайдера, как я могу тогда центрироваться и, возможно, отключить опцию перетаскивания.

Я не знаю ширину слайдов, поэтому сейчас в примере у меня всего 3 слайда, и это текущее поведение

enter image description here

И этот был бы желаемым

enter image description here

Я не могу использовать медиазапросы, потому что я не знаю, когда слайды поместятся в контейнере. Итак, у Swiper есть способ достичь этого? Заранее спасибо.

Я не хочу использовать slidesPerView: 3, как я уже сказал, дело в том, возможность проверить все слайды, которые у нас есть, то, если они все подходят в контейнере, отцентрируйте их. Не заставлять X количество слайдов в вид

...