zoom
开启焦距功能：双击slide会放大/缩小，并且在手机端可双指触摸缩放。可设置缩放选项或设为true使用默认值。
需要在slide中增加类名swiper-zoom-container，结构如下：
zoom 默认只能缩放类名swiper-zoom-container 内的img、picture或canvas，如需在其他类型元素上缩放，可加上类名swiper-zoom-target （5.3.6）
需要在slide中增加类名swiper-zoom-container，结构如下：
<div class="swiper-slide">
<div class="swiper-zoom-container"><img src="path/to/image"></div>
</div>zoom 默认只能缩放类名swiper-zoom-container 内的img、picture或canvas，如需在其他类型元素上缩放，可加上类名swiper-zoom-target （5.3.6）
zoom信息
- 类型：
- booleanobject/boolean
- 举例：
- true
- 启用版本：
- 4.0.0
效果演示
使用方法示例
从Swiper7开始，容器默认类名由'.swiper-container'变更为'.swiper'。
<div class="swiper-slide">
<div class="swiper-zoom-container"> <img src="path/to/image"> </div> <!-- 缩放图片 -->
</div>
<div class="swiper-slide">
<div class="swiper-zoom-container">
<div class="swiper-zoom-target" style="background-image: url(...)"></div> <!-- 缩放其他元素 5.3.6 -->
</div>
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper',{
zoom : true, //开启缩放功能
})
</script>转载原创文章请注明：文章转载自：Swiper中文网 [https://www.swiper.com.cn]
本文地址：https://www.swiper.com.cn/api/zoom/311.html