TYPO3基于bootstrap_package实现轮播每页显示2个并排项

核心问题排查 #

之前active类失效、切换异常的根源是错误给多个轮播项同时加了active类：Bootstrap Carousel 原生JS只会维护1个active状态的元素，切换时会先清空所有项的active类再给目标项赋值，多个初始active会直接打乱JS的索引计算，导致首项不显示、切换错位、类无法正常移除的问题。
要实现「每页显示2个项、点按钮逐次切1个、支持循环」不需要改Bootstrap核心逻辑，靠CSS调整宽度和位移值即可，Fluid层只需要给第一个项加active类。 #

代码修改步骤 #

1. 主模板修正（Template/CarouselStartseiteAngebote.html） #

替换原有轮播容器和循环逻辑，注意不要给第二个项加active判断：

<f:section name="Main">
<div id="carousel-{data.uid}" class="carousel slide carousel-2per-slide" data-bs-ride="false" data-bs-wrap="true" data-bs-touch="true">
  <div class="carousel-inner">
    <f:for each="{records}" as="item" iteration="iter">
      <!-- 仅给索引为0的首项加active，不要给第二个项加 -->
      <div class="carousel-item {f:if(condition: iter.isFirst, then: 'active')}">
        <f:render partial="TextAndImageForCarouselStartseiteAngebote" arguments="{item: item}" />
      </div>
    </f:for>
  </div>
  <f:render partial="CarouselStartseiteAngebote" arguments="{_all}" />
</div>

<!-- 样式可以移到主题全局CSS文件，这里放模板内方便调试 -->
<style>
.carousel-2per-slide .carousel-inner {
  display: flex;
  overflow: hidden;
  padding: 12px 0;
}
.carousel-2per-slide .carousel-item {
  display: block;
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 12px;
  backface-visibility: hidden;
  transition: transform .6s ease-in-out;
}
/* 重写滑动位移值，每次移动1个项的宽度（50%） */
.carousel-2per-slide .carousel-item-next:not(.carousel-item-start),
.carousel-2per-slide .active.carousel-item-end {
  transform: translateX(50%);
}
.carousel-2per-slide .carousel-item-prev:not(.carousel-item-end),
.carousel-2per-slide .active.carousel-item-start {
  transform: translateX(-50%);
}
/* 移动端自动切回单页1项 */
@media (max-width: 767px) {
  .carousel-2per-slide .carousel-item {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .carousel-2per-slide .carousel-item-next:not(.carousel-item-start),
  .carousel-2per-slide .active.carousel-item-end {
    transform: translateX(100%);
  }
  .carousel-2per-slide .carousel-item-prev:not(.carousel-item-end),
  .carousel-2per-slide .active.carousel-item-start {
    transform: translateX(-100%);
  }
}
</style>
</f:section>

如果你的站点用的是Bootstrap 4版本（对应bootstrap_package 11及以下），把所有data-bs-前缀的属性改成data-即可，CSS无需调整。

2. 控制按钮Partial修正（Partial/CarouselStartseiteAngebote.html） #

保持原生Bootstrap按钮逻辑即可，不需要额外加事件，CSS已经自动适配步长：

<button class="carousel-control-prev" type="button" data-bs-target="#carousel-{data.uid}" data-bs-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="visually-hidden">上一个</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carousel-{data.uid}" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">下一个</span>
</button>

3. 图文项Partial（TextAndImageForCarouselStartseiteAngebote.html） #

不需要修改原有内容渲染逻辑，只要保证项内容宽度撑满父级容器即可，不要给外层加固定宽度限制。 #

效果说明 #

• 初始加载时首项带active类，CSS弹性布局自动把第二个项并排显示，不会出现首项丢失的问题
• 点击上/下按钮时，Bootstrap原生JS自动处理active类切换，每次位移50%宽度，刚好移动1个项的位置
• data-bs-wrap="true"属性默认开启循环滚动，到最后一个项后点下一页会自动回到第一个项，不需要额外写JS判断
• 如果轮播项总数为奇数，最后一个项旁会留空，需要补位的话可以在f:for循环结束后，判断{records -> f:count()}是否为奇数，是就额外渲染一次第一个项补位即可。

内容的提问来源于stack exchange，提问作者Mi Neu