我正在使用杂志风格的 swiper.js 滑块，它（在标题页之后）成对显示图像，对应于左/右杂志跨页。
每张幻灯片中的图像默认居中，因此当您加宽浏览器时，滑块也会加宽，每张幻灯片（示例中的蓝色边框）也会加宽，并且页面不会遵守 swiper 的 spaceBetween 设置，而是被迫进一步分开，这是不可取的。
虽然总体响应行为良好，但我希望左侧页面在幻灯片中向右对齐，右侧页面向左对齐，这样当滑块和幻灯片变宽时，页面仍会保持在一起。 （最好还有字幕）
到目前为止，我还没有找到实现这一目标的方法，因此非常感谢您的帮助！
这是一个单页 html 示例：
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script language="javascript">
<!--
$("document").ready(function() {
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'horizontal',
loop: false,
zoom: {
maxRatio: 2,
},
speed: 400,
spaceBetween: 10,
mousewheel: {
invert: true,
},
slidesPerView: 1,
centeredSlides: false,
slidesPerGroupSkip: 1,
grabCursor: true,
keyboard: {
enabled: true,
},
breakpoints: {
850: {
slidesPerView: 2,
slidesPerGroup: 2,
},
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
});
// -->
</script>
<style>
.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;
}
</style>
</head>
<body>
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class="swiper-zoom-container"><img src='image' class='img-fluid'></div>
<p>first page</p>
</div>
<div class="swiper-slide">
<div class="swiper-zoom-container"><img src='image' class='img-fluid'></div>
<p>some caption</p>
</div>
<div class="swiper-slide">
<div class="swiper-zoom-container"><img src='image' class='img-fluid'></div>
<p>different caption</p>
</div>
<div class="swiper-slide">
<div class="swiper-zoom-container"><img src='image' class='img-fluid'></div>
<p>caption</p>
</div>
<div class="swiper-slide">
<div class="swiper-zoom-container"><img src='image' class='img-fluid'></div>
<p>blah</p>
</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</body>
</html>因此运行示例，向右滚动到第 2 和第 3 页，并注意图像位于每张蓝色边框幻灯片的中心。将浏览器拉宽，您会看到滑块变宽，并且图像保持居中 - 迫使它们分开。我希望它们随着浏览器的扩展而保持在一起，以保持杂志式的传播。
谢谢！
更新：好的，主要问题已解决，我真正需要做的就是将弹性框对齐添加到缩放容器（显然，这需要在每个页面的 flex-start 和 flex-end 之间交替以保持他们在一起）。
.swiper-zoom-container {
align-content: flex-start;
justify-content: flex-start;
}
这很难诊断的原因是一堆引导程序和其他奇怪的东西弄乱了布局，使得很难确定任何更改的影响。我必须简单地将其剥离以找到冲突 - 我通常发现在线发布问题通常是引导我实际找到解决方案的一种方式（呵呵！）...
标记为已解决 - 请参阅主帖。