Изображения в каждом слайде по умолчанию центрированы, поэтому при расширении браузера слайдер расширяется, как и каждый слайд (синяя рамка в примере), и вместо соблюдения настройки 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
