如何在Angular中使用最新版Swiper(11.0.6)实现缩放功能？

实现方案 #

你当前使用的是Swiper的Web Components版本，直接通过以下调整即可启用缩放功能：

1. 开启Zoom模块 #

在<swiper-container>标签上添加zoom="true"属性，启用Swiper的缩放功能：

<swiper-container slides-per-view="1" pagination="true" loop="false" zoom="true">

2. 调整幻灯片DOM结构 #

将需要缩放的图片包裹在Swiper官方提供的<swiper-zoom-container>自定义元素内，这是缩放功能的核心容器：

<swiper-slide *ngFor="let img of noticePost.attachments">
  <swiper-zoom-container>
    <img [src]="img.s3ResourceUrl" style="max-width: 100%; height: auto;" alt="公告附件图片">
  </swiper-zoom-container>
</swiper-slide>

3. 优化图片样式 #

移除图片原有的固定height和width属性，改用自适应样式（max-width:100%; height:auto;），避免缩放时出现变形或裁剪问题。

自定义缩放参数（可选） #

如果需要调整缩放行为，可在<swiper-container>上添加额外属性：

• zoom-max-ratio="3"：设置最大缩放倍数（示例为3倍）
• zoom-min-ratio="1"：设置最小缩放倍数（默认1倍）
• zoom-toggle="true"：允许点击切换缩放状态（默认已启用）

完整修改后的HTML代码 #

<swiper-container slides-per-view="1" pagination="true" loop="false" zoom="true" zoom-max-ratio="3">
  <swiper-slide *ngFor="let img of noticePost.attachments">
    <swiper-zoom-container>
      <img [src]="img.s3ResourceUrl" style="max-width: 100%; height: auto;" alt="公告附件图片">
    </swiper-zoom-container>
  </swiper-slide>
</swiper-container>

关键说明 #

你导入的swiper/element/bundle已经包含了所有Swiper核心模块（包括Zoom），无需额外导入或注册单个模块，Angular的CUSTOM_ELEMENTS_SCHEMA配置也已正确设置，无需修改TypeScript代码。

内容的提问来源于stack exchange，提问作者Abu Torab