基于现有Swiper视差横幅代码实现左文、居中VS、右文排版

基于你已写的swiper视差横幅代码，不需要引入任何第三方库，通过原生弹性布局就能实现左文本、中V/S标识、右文本的三栏排版，全程保留你已经配置好的视差动效、文字样式，不会破坏原有页面效果。

• 先修复现有代码的硬伤：你当前写的代码有2处div标签没闭合（</div少了右尖括号），直接运行会导致页面元素串行，调整时优先补全标签
• 布局实现逻辑：新增一层弹性布局的外层容器，把原来垂直堆叠的内容拆成三个独立区块，用Flex属性控制各区块的宽度、对齐方式，所有原有的data-swiper-parallax参数全部保留，不影响swiper的滚动视差效果
  • 外层容器设置横向居中对齐的弹性布局，三个区块横向分散排列，预留足够间距避免不同侧的文字挤在一起
  • 左侧区块占35%宽度，内容左对齐，放置原有的Forex标题、市场介绍文本，对应你设置的-150、-300视差位移参数
  • 中间区块占10%宽度，内容居中放置V/S标识，保留原有的60px字号、白色样式，原有的-550视差位移刚好和左右区块的动效形成自然的错位差
  • 右侧区块占35%宽度，内容右对齐，预留好位置后续填入对比侧的标题、介绍文本
• 小屏兼容：补充媒体查询规则，移动端下自动把横向三栏改成垂直居中堆叠，避免屏幕太窄导致文字换行错乱

/* 新增的布局样式，直接写入全局CSS即可 */
.vs-banner-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 300px;
  padding: 0 5%;
  gap: 4rem;
}
.vs-column {
  width: 35%;
}
.vs-column--center {
  width: 10%;
  text-align: center;
}
/* 小屏适配规则 */
@media (max-width: 768px) {
  .vs-banner-wrapper {
    flex-direction: column;
    padding: 0 2rem;
    gap: 2rem;
  }
  .vs-column {
    width: 100% !important;
    text-align: center !important;
  }
}

<!-- 调整后的HTML结构，完全保留原有动效配置 -->
<div class="vs-banner-wrapper">
  <!-- 左侧栏原有内容 -->
  <div class="vs-column vs-column--left">
    <div class="main-content__title_black" 
         data-swiper-parallax-opacity="0.2" 
         data-swiper-parallax="-150" 
         style=" color: #ffffff;"> 
      Forex
    </div>
    <div class="main-content__text_black" 
         data-swiper-parallax-opacity="0.2" 
         data-swiper-parallax="-300" 
         style=" color: #ffffff;"> 
      The FX market is the market in which participants can buy, sell and exchange currencies. 
    </div>
  </div>

  <!-- 中间V/S标识 -->
  <div class="vs-column vs-column--center">
    <div class="main-content__text_black3" 
         data-swiper-parallax-opacity="0.2" 
         data-swiper-parallax="-550" 
         style=" color: #ffffff; font-size: 60px; "> 
      V/S
    </div>
  </div>

  <!-- 右侧栏预留对比内容位置 -->
  <div class="vs-column vs-column--right">
    <!-- 后续在这里填入对比侧的标题、介绍文本即可，样式与左侧保持统一 -->
  </div>
</div>

内容的提问来源于stack exchange，提问作者Saad Khan