Как выровнять изображения влево/вправо в слайдере swiperJS ⇐ CSS

[Anonymous]

Я использую слайдер swiper.js в журнальном стиле, который (после титульной страницы) отображает изображения парами, что соответствует левой и правой страницам разворота журнала.
Изображения в каждом слайде по умолчанию центрированы, поэтому при расширении браузера слайдер расширяется, как и каждый слайд (синяя рамка в примере), и вместо соблюдения настройки spaceBetween swiper страницы раздвигаются дальше друг от друга, что нежелательно. .
Хотя отзывчивость в целом хорошая, мне бы хотелось, чтобы левая страница была выровнена по правому краю слайда, а правая страница — по левому краю, как и ползунок, и слайды расширяются, страницы по-прежнему остаются вместе. (И подписи, в идеале)
Пока я не нашел способа добиться этого, поэтому буду очень признателен за помощь!
Вот пример одностраничного HTML-кода:

Код: Выделить всё

.swiper {
height: 600px;
}

.swiper-slide {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
padding-top: 20px;
padding-bottom: 30px;
width: 50%;
/* Set the width of each slide to 50% to display two slides side by side */
border: 1px solid blue;
}

.swiper-slide img {
display: block;
border-radius: 6px;
}













[img]image[/img]
first page



[img]image[/img]
some caption



[img]image[/img]
different caption



[img]image[/img]
caption



[img]image[/img]
blah

Итак, запустите пример, прокрутите вправо до страниц 2 и 3 и обратите внимание, что изображения по центру каждого слайда с синей рамкой. Сделайте браузер шире, и вы увидите, что ползунок становится шире, а изображения остаются по центру, разделяя их. Мне бы хотелось, чтобы они оставались вместе по мере расширения браузера, чтобы сохранить разворот в журнальном стиле.
Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/784 ... rjs-slider