Как высчитать slidesPerView (Не предлагайте решение с overflow:visible)?

Question

[godsplan]

Пример: https://codesandbox.io/s/swiper-js-forked-dyeke5?f...
Хочется чтобы начало ЦЕЛЬНОГО слайда было равно началу ширины контейнера, то есть по зеленой линии.


Решение этой проблемы заключается в оборачивании в container и задавании для слайдера overflow:visible, но я не хочу так. Есть какие-то варианты еще? Например динамическое высчитывание slidesPerView или что-то такое.

Comments

[szQocks]

так шоль ?) xDD слайдер

Answer 1

[mevCode]

Установите пожалуйста centeredSlides: false, я думаю в вашем случае это решит проблему.

new Swiper(".swiper", {
  slidesPerView: 5.5,
  centeredSlides: false
  spaceBetween: 10,
  loop: true
});

Comments

[godsplan]

в моем примере такие же стили, но они не решают задачу

[mevCode]

В вашем примере centeredSlides задан со значением true. Попробуйте изменить на false

[godsplan]

mevCode, да, я попрбовал.это не то

[mevCode]

godsplane, Хочется чтобы начало ЦЕЛЬНОГО слайда было равно началу ширины контейнера, то есть по зеленой линии.
В случае с centeredSlides: false, первый слайд подстраивается под начало контейнера. Какая у вас задача в общем?

[mevCode]

godsplane, Например динамическое высчитывание slidesPerView или что-то такое.
Если необходимо получить ширину контейнера при инициализации свайпера - можете использовать

onSwiper={swiper => console.log("Swiper has been initialized", swiper.width)}

.
В случае, если ширину нужно получать при изменении ширины экрана - используйте

onResize={(swiper) => console.log("Window has been resized", swiper.width)}

[godsplan]

mevCode,

Смотрите. Есть контейнер, допустим 1200. На скрине в нем находится текст. После контейнера идет слайдер на фул ширину , то есть 100% от вью порта.
Мне нужно чтобы по бокам слайдера показывались половинки слайдеров (Как в моем примере) но и какие то слайды (1.2 или 3 в зависимости от ширины экрана, а так же последние) находились на границе предполагаемого контейнера.
Опять же если этого можно добавится если запихать слайдер в контейнера и задать ему overflow:visible, но мне не нравится это решение так как из-за него лагает loop и еще много других разных багов. так как свайпер думает что эти слайды скрыты.
Надеюсь понятно.