Prestashop集成Swiper.js时如何隐藏轮播滑块内其余未展示图片

导致多余图片外露的核心原因有两个，按以下步骤调整即可实现仅展示当前单张滑块、隐藏其余图片的需求：

核心问题说明 #

• Swiper v7及更高版本的根容器默认类名已从旧版的swiper-container更新为swiper，你使用了旧类名导致Swiper自带的overflow: hidden等基础样式没有生效，容器外的滑块就会直接显示出来
• 初始化配置中没有指定单页展示滑块数量，部分场景下会出现自适应异常

调整后完整代码 #

<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

<div class="modal fade js-product-images-modal" id="product-modal">
  <div class="modal-dialog" role="document">
    <!-- 根容器类名修改为swiper，保留原有宽度设置 -->
    <div class="swiper" style="width: 100%">
      <div class="swiper-wrapper">
        {foreach from=$product.images item=image}
        <div class="swiper-slide">
          <div class="swiper-zoom-container">
            <img src="{$image.bySize.large_default.url}" alt="{$image.legend}" style="width: 100%;" title="{$image.legend}" itemprop="image">
          </div>
        </div>
        {/foreach}
      </div>
      <!-- 分页器 -->
      <div class="swiper-pagination"></div>
      <!-- 切换按钮 -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
  </div>
</div>

<script>
var swiper = new Swiper(".swiper", {
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  pagination: {
    el: ".swiper-pagination",
  },
  // 明确指定单次仅展示1个滑块
  slidesPerView: 1
});
</script>

如果你不想修改类名，也可以直接给当前的swiper-container添加自定义样式：.swiper-container { overflow: hidden; position: relative; }，也能解决溢出显示的问题。

内容的提问来源于stack exchange，提问作者Alan Janczuk